Question

The header is fixed when scrolled down. However, when scrolled back up all the way to the top, the header detaches and is unfixed again. How do I maintain a prolonged fixed header?

How do I edit jQuery or CSS code, or can I download a plugin?

Here’s the example I’m basing off of: http://www.chipotle.com/en-US/html/cultivate.html#fnd

Answer 1

The following jQuery should accomplish what you are looking for:

$(document).ready(function() { 

  $(window).scroll(function(e) {  
    if ($(window).scrollTop() > x) { 
      $('.stayStill').addClass("fixed");
    } else {
      $('.stayStill').removeClass("fixed");
    } 
  }); 

}); 

x (which should be changed to a number (i.e. 100, 120, etc)) marks how many pixels from the top you have to be when the div is set to the fixed class. Once the person goes back above x pixels, it will be set back to normal, by removing the fixed class.

Also, .stayStill would represent your navigation bar, or whatever class you want to stall still.

Your fixed class should consist of the following CSS:

position: fixed;