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

Scroll function scrolling infinitely; makes footer inaccessible

本文关键字：滚动 访问 功能 无限      更新时间：2023-09-26

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

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

有没有办法限制侧边栏向下滚动得比它应该的太远？

我希望我已经理解了你的问题。你想像这样在某个位置停止盒子跟随吗？

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

在 JSFiddle 中尝试该示例

相关文章：