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

Question

I currently have a script that fixes a <header> element after a certain amount of scrolling. How would I modify it so that the element scrolls normally until it gets to the top of the page then fixes. Something like this .

Current code:

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

NB .affix is just {position:fixed} .

Site

The <header> element is the sidebar on the right with the big green demo button.

Answer 1

To make your sidebar fixed when the user scrolls down and reaches the top of the sidebar, use Jquery to add a class name to the sidebar when it reaches the window top position and add the position:fixed style to this new class.

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

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

This will add a class name affix to the sidebar when the user scrolls down and reaches the top of the sidebar. Now add the fixed position to the sidebar with class name affix .

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

DEMO

Answer 2

I believe you may be looking for something like this: http://stickyjs.com/ (scroll to see it in action, you can do this to any element on a page). If that isn't what you are looking for let me know and I will help come up with something that suits your needs.