sticky header

1nav {
2    position: sticky; top: 0;
3}
4

1.navigation {
2   /* fixed keyword is fine too */
3   position: sticky;
4   top: 0;
5   z-index: 100;
6   /* z-index works pretty much like a layer:
7   the higher the z-index value, the greater
8   it will allow the navigation tag to stay on top
9   of other tags */
10}

1.fixed-content {
2    top: 0;
3    bottom:0;
4    position:fixed;
5    overflow-y:scroll;
6    overflow-x:hidden;
7}

1*****************HTML****************
2
3<div class="sticky"></div>
4
5
6*****************CSS****************
7
8.fixed {
9    position: fixed;
10    top:0; left:0;
11    width: 100%; }
12    
13    
14******************jQuery***************
15
16$(window).scroll(function(){
17  var sticky = $('.sticky'),
18      scroll = $(window).scrollTop();
19
20  if (scroll >= 100) sticky.addClass('fixed');
21  else sticky.removeClass('fixed');
22});

1#header {
2  position: fixed;
3}
4
5#content {
6  margin-top: 100px;
7}