How to make a div stick to top when it reaches the top of the window

Question

How do I make #headnav stick to the top when the page's scroll position reaches the top, then unstick when it would be returned to its original position?

PS The repeated "CONTENT" in the code is to simulate scrolling. It is not a spam

jsFiddle

<h1>I AM A HEADER</h1>
<div id="headnav"></div>
<pre><h1>
    CONTENT
    CONTENT
    CONTENT
    CONTENT
    CONTENT
    CONTENT
    CONTENT
    CONTENT
    CONTENT
    CONTENT
    CONTENT
    CONTENT
    CONTENT
    CONTENT
    CONTENT
    CONTENT
    CONTENT
    CONTENT
    CONTENT
    CONTENT
    CONTENT
    CONTENT
    CONTENT
    CONTENT
    CONTENT
    CONTENT
    CONTENT
</h1></pre>

body {
    margin:0
}

#headnav {
    height: 75px;
    width: 100%;
    background-color: black;
}

Answer 1

This is a very simple thing to do.

Find out what the original position of the header is, then attach a scroll handler to the body which checks the scroll position against the original position of the div.

• If the scroll position is greater than the original position, add position: fixed
• If the scroll position is less than the original position, remove position: fixed

( Demo )

var headnav = document.getElementById('headnav');
var headnavPos = headnav.offsetTop;

window.onscroll = function() {
    if(document.body.scrollTop > headnavPos) {
        if(headnav.style.position !== 'fixed') {
            headnav.style.position = 'fixed';
        }
    } else  {
        if(headnav.style.position === 'fixed') {
            headnav.style.position = '';
        }
    }
}

Answer 2

Just give position: fixed to h1 :

h1 {position: fixed; top: 0;}

Fiddle: http://jsfiddle.net/5z4paLgr/1/

Answer 3

i am not sure that understand u correctly but may be this help you

Fiddle http://jsfiddle.net/jg4kdfqs/1/

JavaScript

$(document).ready(function(){
  var HeaderTop = $('#header').offset().top;
  var hh =HeaderTop + 300;

  $(window).scroll(function(){
    if( $(window).scrollTop() > HeaderTop ) {
      if($(window).scrollTop() > hh) {
        $('#header').css({position: 'fixed', top: '0px', background:'#000'});   
      } else{
        $('#header').css({position: 'fixed', top: '0px'});  
      }


    } else {
      $('#header').css({position: 'static',background:'red'});
    }
  });
});

HTML

<div id="header">
  nav
</div> 

Answer 4

Similar to tarasikgoga but purely javascript:

Fiddle http://jsfiddle.net/5z4paLgr/3/

Javascript

var attached = false;

window.onscroll = function (e) {
    if(!attached && window.scrollY > 150){
        attached = true;
        document.getElementById("headnav").classList.add('fixed-top');
        document.getElementById("content").classList.add('content-margin-top');
    }
    if(attached && window.scrollY < 150){
        attached = false;
        document.getElementById("headnav").classList.remove('fixed-top');
        document.getElementById("content").classList.remove('content-margin-top');
    }
} 

CSS

body {
    margin:0
}
h1{
    height: 150px;
    margin: 0;
}
#headnav {
    height: 75px;
    width: 100%;
    background-color: black;
}
#headnav.fixed-top{
    position: fixed;
    top: 0;
}
.content-margin-top{
    margin-top: 75px;
}

HTML Just add id="content" to your content div

Adjust with yours heights (here you have 150px for header and 75px for menu)