用户向下滚动 x 金额后侧边栏移动

Sidebar move after user scrolls down x amount

本文关键字：侧边栏 移动 金额 滚动 用户      更新时间：2023-09-26

让我们直接进入它：当用户滚动x数量时，我希望侧边栏开始移动。现在，一旦侧边栏到达其末尾，我希望它保持固定并滚动到页脚。这是我得到的。

http://jsfiddle.net/Ajp44/

这是我的Javascript：

 $(document).ready(function() {
// Cache selectors for faster performance.
var $window = $(window),
    $sidebar = $('#anchor'),
    $sidebarAnchor = $('#right');
// Run this on scroll events.
$window.scroll(function() {
    var window_top = $window.scrollTop();
    var div_top = $sidebarAnchor.offset().top;
    if (window_top > div_top) {
     // Make the div sticky.
     $sidebar.addClass('stick');
     $sidebarAnchor.height($sidebar.height());
    }
    else {
        // Unstick the div.
        $sidebar.removeClass('stick');
        $sidebarAnchor.height(0);
    }
});
});

出于某种原因，JSfiddle没有显示Javascript正在做什么，但是如果你在PC上运行它，你可以看到。每当用户滚动经过侧边栏的结尾时，侧边栏不会像预期的那样向下滚动，而是跳到页面的右侧......

所以我的问题是：如何阻止侧边栏跳到页面一侧，并将其保持在父 DIV 的限制范围内？

干杯！

不要

在你的stick类中做right : 0。在固定元素中，位置属性相对于视口。

https://developer.mozilla.org/en-US/docs/Web/CSS/position#Fixed_positioning

相关文章：