html5: dynamic header that turns into a navbar

Question

Coding a static long-scroll website in node/express/backbone/stylus/dust.

We are going to have a ~400px header image that sits in a fixed position at the top of the page that then shrinks into a ~100px nav bar as you scroll downwards, then moves between a few states as you pass through various parts of the page.

What is the best way to code something like this? I know that's a very broad question, and that I don't have any code to substantiate this question, but I'm not sure what combination of CSS / scripting I would emplpy to make sure that the header shrinks, then persists, then moves between states.

yup, jquery / lodash / backbone / dust / stylus on the client side. have a scaffolt setup that automatically gives me `index.coffee`, `style.styl`, and `template.dust` per backbone view, of which this is one. — fox, Dec 15 '13 at 12:07

score 1 · Answer 1 · answered Dec 15 '13 at 12:10

Using jQuery, just set up an event handler for the scroll event (http://api.jquery.com/scroll/), then adjust the header's height or whatever else you need to do depending on what the current value of the scroll is. You can modify this code and throw it onto your page:

<script>

  $(window).scroll(function(){
    var $header = $('header');
    var scrollY = $(this).scrollTop();

    if (scrollY < 100){
      $header.css('height', '400px');
    } elseif(scrollY > 100 && scrollY < whatever){
      $header.css('height', '100px');
    } elseif( your next range here ){
      ...
    }

</script>

ah this puts me on the right track, thanks a bunch. – fox Dec 15 '13 at 12:20 — fox, Dec 15 '13 at 12:20

score 0 · Answer 2 · edited May 23 '17 at 10:25

my first idea is to do the animation in javascript some pseudo code

body
   div long text
   div.navigation(data-navigation="shrink") at the beginning this div is outside of the screen are
   div other long text   
   div.navigation(data-navigation="changeElements") i am somewhere

   script.

$( window ).scroll(function() {
   // get all data-navigation elements
   var allNavigationElements = $('.navigation'), i;
   for(i = 0; i < allNavigationElements.length; i++){

here check are the elements in the view with Check if element is visible after scrolling

      if(inview){
         changeNavigationTo($element.data('navigation')
      }
   }
}

html5: dynamic header that turns into a navbar

2 Answers2