滾動時固定div，這會移動菜單中的其他元素

Question

我的網站右側有一些菜單項，它們是：-

• 購物籃摘要
• 最暢銷
• 快速鏈接
• 等等

我希望購物籃摘要在頁面滾動時跟隨頁面，我知道如何使用position：fixed，但是我需要它還將其他元素移開，否則它將與它們重疊。

我正在看這個： jsfiddle可以完成工作並起作用，但是顯然那只是在單擊按鈕時，我需要調整它才能通過jQuery滾動。

我已經閱讀了很多關於浮動div的教程，但它們都是針對一個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

用這個

拖放效果最佳。

問候。

Answer 2

這是您要找的嗎？： 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());
      }
  }
});

我必須承認，這種解決方案並不是最佳的用戶體驗，即它會跳轉而不是平滑滾動。 如果是我，我將可移動部分放在右列的最后一個項目中，並通過絕對定位將其向下移動到頁面上，以便它精確地跟隨可查看區域的頂部。