Question

我的网站右侧有一些菜单项： -

购物篮摘要
畅销书
快速链接
等

我希望随着页面的滚动，篮子摘要跟随页面，我知道如何使用position：fixed，但是我需要它来移动其他元素，否则它只会重叠它们。

我正在看这个：jsfiddle它可以完成这项工作并且可以正常工作，但很明显只有按钮点击，我需要调整它以通过jQuery滚动。

我已经阅读了许多浮动固定div的教程，但它们都是一个div而且没有任何其他div可以与之交互。

任何想法，如果可能和/或如何做？

来自js fiddle的代码如下： -

$(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

使用此

Drag & Drop是最好的。

问候。

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());
      }
  }
});

我必须承认，这个解决方案不是最好的用户体验，即它跳转而不是顺利滚动。如果是我，我会将可移动部分作为右列中的最后一项，并以绝对定位向下移动到页面，使其完全跟随可视区域的顶部。

滚动时固定div，移动菜单中的其他元素

2 个答案: