jQuery - Sticky header that shrinks when scrolling down

Question

I wonder how to make a sticky header shrink with animation  when you scroll down the page and goes back to normal state when the page is scrolled up to the top  Here are two examples to clearify   http   themenectar com demo salient   http   www kriesi at themes enfold   I get the part to make it fixed  but how should I do to shrink my header when the user scrolls down   Thanks a ton

User · Accepted Answer

This should be what you are looking for using jQuery.

$(function(){
  $('#header_nav').data('size','big');
});

$(window).scroll(function(){
  if($(document).scrollTop() > 0)
{
    if($('#header_nav').data('size') == 'big')
    {
        $('#header_nav').data('size','small');
        $('#header_nav').stop().animate({
            height:'40px'
        },600);
    }
}
else
  {
    if($('#header_nav').data('size') == 'small')
      {
        $('#header_nav').data('size','big');
        $('#header_nav').stop().animate({
            height:'100px'
        },600);
      }  
  }
});

Demonstration: http://jsfiddle.net/jezzipin/JJ8Jc/

User · Answer

Here a CSS animation fork of jezzipin s Solution  to seperate code from styling   JS     window  on  scroll touchmove   function            header nav   toggleClass  tiny     document  scrollTop    gt  0         CSS    header     width 100     height 100px    background   26b    color   fff    position fixed    top 0    left 0    transition  height 500ms  background 500ms     header tiny     height 40px    background   aaa      http   jsfiddle net sinky S8Fnq   On scroll touchmove the css class  tiny  is set to   header nav  if    document  scrollTop    is greater than 0   CSS transition attribute animates the  height  and  background  attribute nicely

User · Answer

I took Jezzipin s answer and made it so that if you are scrolled when you refresh the page  the correct size applies  Also removed some stuff that isn t necessarily needed   function sizer         if   document  scrollTop    gt  0                header nav   stop   animate               height  40px            600         else               header nav   stop   animate               height  100px            600              window  scroll function        sizer         sizer

User · Answer

http   callmenick com 2014 02 18 create-an-animated-resizing-header-on-scroll   This link has a great tutorial with source code that you can play with  showing how to make elements within the header smaller as well as the header itself

User · Answer

I did an upgraded version of jezzipin s answer  and I m animating padding top instead of height but you still get the point           ResizeHeaderOnScroll        constructor     var ResizeHeaderOnScroll   function         this protocol             window location protocol      this domain               window location host      ResizeHeaderOnScroll prototype init      function         if   document  scrollTop    gt  0                   header   data  size   big          else              header   data  size   small               ResizeHeaderOnScroll prototype checkScrolling           window  scroll function            ResizeHeaderOnScroll prototype checkScrolling                ResizeHeaderOnScroll prototype checkScrolling      function         if   document  scrollTop    gt  0                if    header   data  size       big                            header   data  size   small                   header   stop   animate                   paddingTop  1em                   paddingBottom  1em                200                       else                 if    header   data  size       small                            header   data  size   big                   header   stop   animate                   paddingTop  3em                200                            document  ready function        var resizeHeaderOnScroll   new ResizeHeaderOnScroll        resizeHeaderOnScroll init

User · Answer

Based on twitter scroll trouble  http   ejohn org blog learning-from-twitter     Here is my solution  throttling the js scroll event  usefull for mobile devices   JS     function         var  document  didScroll  offset      offset       menu   position   top       document     document       didScroll   false        window  on  scroll touchmove   function           return didScroll   true              return setInterval function           if  didScroll                menu   toggleClass  fixed    document scrollTop    gt  offset           return didScroll   false                 250           CSS    menu     background  pink    top  5px      fixed     width  100     position  fixed    top  0      HTML    lt div class  menu  gt MENU FIXED ON TOP lt  div gt    http   codepen io anon pen BgqHw

[javascript] jQuery - Sticky header that shrinks when scrolling down

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css

Examples related to web-deployment