Question

让我们直截了当：当用户滚动x金额时，我希望侧边栏开始移动..现在，一旦侧边栏到达其末端，我希望它保持固定并滚动到页脚。这就是我得到的。

这是我的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的限制内？

干杯！

Answer 1

不要在right : 0课程中stick。在固定元素中，位置属性相对于视口。

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

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

1 个答案: