滚动时固定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());
      }
  }
});

我必须承认，这种解决方案并不是最佳的用户体验，即它会跳转而不是平滑滚动。 如果是我，我将可移动部分放在右列的最后一个项目中，并通过绝对定位将其向下移动到页面上，以便它精确地跟随可查看区域的顶部。