javascript - メニュー内の他の要素を移動するスクロール中のdivを修正しました

Question

ウェブサイトの右側に次のようなメニュー項目があります。-

• バスケットの概要
• ベストセラー
• クイックリンク
• 等

ページがスクロールされるときにバスケットの概要をページに沿って表示したいのですが、position：fixedを使用してこれを行う方法を知っていますが、他の要素も邪魔にならないように移動する必要があります。そうしないと、要素が重なってしまいます。

私はこれを見ていました：jsfiddleは仕事をして機能しますが、明らかにそれはボタンをクリックするだけで、jQueryを介してスクロールするようにこれを適応させる必要があります。

フロート固定divのチュートリアルをたくさん読みましたが、それらはすべて1つのdiv用であり、他のdivと対話する必要はありません。

可能であればアイデアやその方法はありますか？

次のようにjsフィドルからのコード：-

$(function() {
    $('.upButton').click(function(e){
        var $parent = $('.highlight').closest('.box');
        $parent.insertBefore($parent.prev());           

    });

    $('.downButton').click(function(e){
        var $parent = $('.highlight').closest('.box');

        $parent.insertAfter($parent.next());   
    });
});

Answer 1

これはあなたが探しているものですか？： http： //jsfiddle.net/cmontgomery/YVh4q/

基本的に、ウィンドウがスクロールするたびに、セクションが表示領域にあるかどうかを確認し、ない場合はそれに応じて調整します。

$(window).scroll(function () {
  var mover = $("#sidebar .quick-links");
  if($(window).scrollTop() === 0) {
      //console.log("to top");
      mover.prependTo("#sidebar");
  } else if(!isFullyInViewableArea(mover)) {
      var parent = mover.closest('.section');
      if(isBelowViewableArea(mover)) {
          //console.log("moving up");
          parent.insertBefore(parent.prev());
      } else {
          //console.log("moving down");
          parent.insertAfter(parent.next());
      }
  }
});

確かに、このソリューションは最高のユーザーエクスペリエンスではありません。つまり、スムーズにスクロールする代わりにジャンプします。私の場合は、可動セクションを右の列の最後の項目として配置し、絶対位置でページを下に移動して、表示可能領域の上部に正確に追従するようにします。

Answer 2

これを使って

ドラッグアンドドロップが最適です。

ご挨拶。