jQuery - En-tête collant qui diminue lors du défilement

Question

Je me demande comment faire un collant en-tête d'une réduction(avec animation) lorsque vous faites défiler la page et revient à l'état normal lorsque la page défile vers le haut. Voici deux exemples de clearify:

http://themenectar.com/demo/salient/

http://www.kriesi.at/themes/enfold/

Je reçois la pièce pour qu'il fixe, mais comment dois-je faire pour réduire mon en-tête lorsque l'utilisateur fait défiler vers le bas?

Merci une tonne

Answer 1

Cela devrait être ce que vous cherchez avec 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);
      }  
  }
});
 

Démonstration: http://jsfiddle.net/jezzipin/JJ8Jc/

Answer 2

Voici une fourchette d'animation CSS de la solution de jezzipin

JS:

 $(window).on("scroll touchmove", function () {
  $('#header_nav').toggleClass('tiny', $(document).scrollTop() > 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/

Answer 3

http://callmenick.com/2014/02/18/create-an-animated-resizing-header-on-scroll/

Ce lien contient un excellent didacticiel avec le code source auquel vous pouvez jouer, montrant comment rendre les éléments de l’en-tête plus petits, ainsi que l’en-tête lui-même.

Answer 4

Basé sur le problème de défilement de twitter ( http://ejohn.org/blog/learning-from-twitter/ ).

Voici ma solution, limiter l'événement js scroll (utile pour les appareils mobiles)

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() > offset);
        return didScroll = false;
      }
    }, 250);
  });
 

CSS:

 .menu {
  background: pink;
  top: 5px;
}

.fixed {
  width: 100%;
  position: fixed;
  top: 0;
}
 

HTML:

 <div class="menu">MENU FIXED ON TOP</div>
 

http://codepen.io/anon/pen/BgqHw

Answer 5

Voici une solution que j'ai élaborée. C'est un peu plus compliqué, mais fait le travail avec un peu d'animation extensible. https://github.com/Jlshulman/Elastic-Bar