Question

我的网站上有一种侧边栏，它必须与用户一起向下滚动，以便它始终在视图中。

我现在使用的代码实际上工作正常，但有一个问题。在较小的屏幕上，侧边栏会在侧边栏之前滚动，因此即使滚动也无法看到它。

所以我想要的是侧边栏用底部滚动而不是用顶部向下推，这样当你到达侧边栏的末端时它会开始滚动。

这是我目前正在使用的代码。



var documentHeight = 0;
var topPadding = 10;
$(function() {
    var offset = $("#mainright").offset();
    documentHeight = $(document).height();
    $(window).scroll(function() {
        var sideBarHeight = $("#mainright").height();
        if ($(window).scrollTop() > offset.top) {
            var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
            var maxPosition = documentHeight - (sideBarHeight);
            if (newPosition > maxPosition) {
                newPosition = maxPosition;
            }
            $("#mainright").stop().animate({
                marginTop: newPosition
            });
        } else {
            $("#mainright").stop().animate({
                marginTop: 0
            });
        };
    });
});

Answer 1

我认为完成此类任务的“最佳做法”是使用从absolute到fixed的动态更改css位置，反之亦然。一个基本的例子可能如下：

$(function(){
   var $box    = $('.box'),
       offset  = $box.offset(),
       doc_h   = $(document).height();

    $(window).scroll(function(){
        if($(window).scrollTop() > offset.top) {
            if(!$box.hasClass('fix'))
                $box.toggleClass('normal fix');
        }
        else{
            if(!$box.hasClass('normal'))
                $box.toggleClass('normal fix');
        }
    });
});

行动中的示例：http://www.jsfiddle.net/YjC6y/14/

Answer 2

$(function() {
  var top = 50;
  $(window).scroll(function() {
    $('#box').stop().animate({ top: $(window).scrollTop() + top}, 1000);
  });
});

尝试以下示例： http://jsbin.com/omiyi3

Answer 3

我认为你可以通过将你的函数放入其中一个来使侧边栏响应：

if (responsive_viewport >= 768) {}

这使得只有在视口大于或等于768px时才会加载该函数。

Jquery跟随滚动

3 个答案: