CODEWITHSUNDEEP
javascripthtmlcss
Dr. Owning
Dr. Owning

Reputation: 173

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

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?

P.S. 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;
}

Upvotes: 0

Views: 1323

Answers (4)

user4639281
user4639281

Reputation:

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 = '';
        }
    }
}

Upvotes: 3

Arnaud Bertrand
Arnaud Bertrand

Reputation: 1461

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)

Upvotes: 0

tarasikgoga
tarasikgoga

Reputation: 45

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>

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

Just give position: fixed to h1:

h1 {position: fixed; top: 0;}

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

Upvotes: 1

Related Questions