Question

On my website, I have a div beneath my header with some quick links. I am using http://davidwalsh.name/persistent-header-opacity to keep that div on-screen at all times. However, I want it to show at the top (position:fixed;top:0px;, but only once the original place has been passed. In other words, I don’t want it sticking to the top until the user has scrolled past it. How?

Answer 1

You can do this using JavaScript by listening for the scroll event and responding with a style change based on the scroll position:

var nav = document.getElementById('hmenus'); 
var navTop = nav.offsetTop;

window.onscroll = function(e) { 
  var scrollY = window.scrollY ? window.scrollY : document.documentElement.scrollTop;
  if (navTop < scrollY) {
    nav.style.position = 'fixed'; nav.style.top = 0;
  } else { 
    nav.style.position = ""; nav.style.top = "";
  }
}

​
#hmenus is a stackoverflow element, so you can try it right here in Firebug. 🙂