Sticking Div to Top After Scrolling Past it

css, html, javascript, jquery

Solution

Try using the `offset().top` of the `#navwrap` element. That way the element will be fixed from it's starting position in the document, regardless of where that is. For example:

function fixDiv() {
    var $div = $("#navwrap");
    if ($(window).scrollTop() > $div.data("top")) { 
        $div.css({'position': 'fixed', 'top': '0', 'width': '100%'}); 
    }
    else {
        $div.css({'position': 'static', 'top': 'auto', 'width': '100%'});
    }
}

$("#navwrap").data("top", $("#navwrap").offset().top); // set original position on load
$(window).scroll(fixDiv);

Example fiddle

Problem

Right now, I'm able to stick the `div` to the top after it scrolls down `320px` but I wanted to know if there is another way of achieving this. Below I have my code: ``` jQuery(function($) { function fixDiv() { if ($(window).scrollTop() > 320) { $('#navwrap').css({ 'position': 'fixed', 'top': '0', 'width': '100%' }); } else { $('#navwrap').css({ 'position': 'static', 'top': 'auto', 'width': '100%' }); } } $(window).scroll(fixDiv); fix5iv(); }); ``` it works, but some `divs` above it will not always be the same height so I can't rely on the `320px`. How do I get this to work without using `if ($(window).scrollTop() > 320)` so I can get it to fade in at the top after the user scrolls past the `div #navwrap`?

Original source