当一个元素到达页面顶部时固定它

Question

当一个元素到达页面顶部时固定它

5

我目前有一个脚本，可以在滚动一定量后修复<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> 元素是右侧带有大绿色演示按钮的侧边栏。

- Sebastian

你可以在这里获取该插件：http://www.jozefbutko.com/stickyNavbar/ - urbz

2个回答

2

我相信你可能在寻找类似这个的内容：http://stickyjs.com/ （滚动查看它的效果，你可以将其应用于页面上的任何元素）。如果这不是你要找的，请告诉我，我会帮助你寻找适合你需求的东西。

- SimplyAzuma

哇，太棒了的插件。只用了2秒钟就完美地运行了。 - MomasVII

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- James · Accepted Answer

为了使您的侧边栏在用户向下滚动并到达侧边栏顶部时固定，使用JQuery在侧边栏到达窗口顶部位置时添加一个类名，并将position:fixed样式添加到此新类中。

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

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

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

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