0

我的网站右侧有一些菜单项，它们是：-

  • 篮子摘要
  • 最畅销
  • 快速链接
  • ETC

我希望购物篮摘要在页面滚动时跟随页面，我知道如何使用位置：固定，但我需要它也将其他元素移开，否则它只会与它们重叠。

我正在看这个：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());   
    });
});
4

2 回答 2

0

用这个

拖放是最好的。

问候。

于 2013-01-05T17:05:40.733 回答
0

这是你要找的吗？： 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());
      }
  }
});

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

于 2013-01-06T00:06:24.037 回答