在元素到达页面顶部时修复它

时间:2014-04-15 10:57:30

标签: javascript jquery css

我目前有一个脚本可以在一定量的滚动后修复<header>元素。我如何修改它,以便元素正常滚动,直到它到达页面顶部然后修复。类似于this

当前代码:

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

N.B。 .affix只是{position:fixed}

Site

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

2 个答案:

答案 0 :(得分:16)

要在用户向下滚动并到达侧边栏顶部时修复侧边栏,请使用Jquery在侧边栏到达窗口顶部位置时将其添加到边栏,并将position:fixed样式添加到此新边框类。

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

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

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

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

DEMO

答案 1 :(得分:2)

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