当元素到达页面顶部时修复元素

Question

我目前有一个脚本，可以在一定量的滚动后修复<header>元素。 我将如何修改它以便元素正常滚动，直到它到达页面顶部然后修复。 像这样的东西。

当前代码：

$(document).ready(function(){
    // Fix Sidebar 
    windowHeight = $(window).height();
    sidebarHeight = $(".sidebar").height() + 70;
    console.log(sidebarHeight + ", " + windowHeight);
    if (windowHeight > sidebarHeight) {
        $('.sidebar').addClass("affix");
    }
});

注意.affix只是{position:fixed} 。

地点

<header>元素是右侧的侧边栏，带有大的绿色演示按钮。

Answer 1

要在用户向下滚动并到达侧边栏顶部时固定侧边栏，请使用 Jquery 在侧边栏到达窗口顶部位置时添加一个类名，并将position:fixed样式添加到这个新类中。

var stickySidebar = $('.sidebar').offset().top;

$(window).scroll(function() {  
    if ($(window).scrollTop() > stickySidebar) {
        $('.sidebar').addClass('affix');
    }
    else {
        $('.sidebar').removeClass('affix');
    }  
});

当用户向下滚动并到达侧边栏的顶部时，这将向sidebar添加一个类名称affix 。 现在将固定位置添加到sidebar并带有类名affix 。

.sidebar.affix{
    position:fixed;
    top:0;
    right:0;
}

演示

Answer 2

我相信您可能正在寻找这样的东西： http : //stickyjs.com/ （滚动查看它的实际效果，您可以对页面上的任何元素执行此操作）。 如果这不是您要找的东西，请告诉我，我会帮助您想出适合您需求的东西。