jQuery Stick header on scroll

Question

I have made a rediculasly small snippet to make a sub-header stick to the top. But since , Like I said - I am by no means a js genious or jQuery genious - and actually far from

Answer 1

You can try this way. I made a shorter version for easier analysis. fiddle here

floating heading
sticky heading
 
    1
2
3
4
5
6
7
8
9
10





#ontop {width:100%; height:80px; background-color:yellow;}
header {width:100%; height:20px; background-color:lightgrey; }
#wrapper {background-color:lightblue; height:5000px;}

.navfixed {position: fixed; top: 0px; z-index: 100; width:100%; display:block; margin-bottom:120px; } 
.wrapperBelow{margin-top:22px;}


$(function () {
    var elem = $('header'),
        wrapperElem = $('#wrapper'),
        elemTop = elem.offset().top;
    $(window).scroll(function () {
        elem.toggleClass('navfixed', $(window).scrollTop() > elemTop);
         wrapperElem.toggleClass('wrapperBelow', $(window).scrollTop() > elemTop);
    }).scroll();
});