Question

当我或她在浏览器页面中向上或向下滚动时，我正在尝试实施侧边栏以跟随用户的屏幕。但是我遇到的问题是，如果用户继续向下滚动，侧边栏会继续无限向下滚动页面。

 var element = $('#movingBox'),
    originalY = element.offset().top;

// Space between element and top of screen (when scrolling)
var topMargin = 100;



$(window).on('scroll', function(event) {
    var scrollTop = $(window).scrollTop();

    element.stop(false, false).animate({
        top: scrollTop < originalY
                ? 0
                : scrollTop - originalY + topMargin
    }, 300);
});

有没有办法限制侧边栏滚动太远而不是它应该的？

Answer 1

我希望我理解你的问题。你想在这样的某个位置停止关注这个框吗？

var element = $('#movingBox'),
    originalY = element.offset().top;

// Space between element and top of screen (when scrolling)
var topMargin = 100;

$(window).on('scroll', function(event) {
    var scrollTop = $(window).scrollTop();

    var stop = $('#stop').offset().top; // or in pixel
    stop -= $('#movingBox').height() + topMargin;

    if (scrollTop<stop) {
        element.stop(false, false).animate({
            top: scrollTop < originalY
                    ? 0
                    : scrollTop - originalY + topMargin
        }, 300);
    }
});

Try the example in JSFiddle

滚动功能无限滚动;使页脚无法访问

1 个答案: