jQuery - Sticky-Header, der beim Scrollen nach unten verkleinert wird

Ich frage mich, wie man einen klebrigen Header (mit Animation) verkleinert, wenn man die Seite nach unten scrollt und zum normalen Zustand zurückkehrt, wenn die Seite nach oben gescrollt wird. Hier sind zwei Beispiele zur Verdeutlichung:

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

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

Ich bekomme das Teil, um es zu reparieren, aber wie soll ich meinen Header verkleinern, wenn der Benutzer nach unten scrollt?

Danke vielmals

Dies sollte das sein, wonach Sie mit jQuery suchen.

$(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/

Hier eine CSS-Animationsgabel von Jezzipins Lösung, um Code vom Styling zu trennen.

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/

Beim Scrollen / Berühren wird die CSS-Klasse "tiny" auf "#header_nav" gesetzt, wenn "$ (document) .scrollTop ()" größer als 0 ist.

Das CSS-Übergangsattribut animiert die Attribute "Höhe" und "Hintergrund" gut.

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

Dieser Link enthält ein großartiges Tutorial mit Quellcode, mit dem Sie spielen können. Es zeigt, wie Sie Elemente im Header sowie den Header selbst verkleinern.

Basierend auf Twitter-Scroll-Problemen ( http://ejohn.org/blog/learning-from-twitter/ ).

Hier ist meine Lösung, das js scroll-Ereignis zu drosseln (nützlich für mobile Geräte)

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

Ich habe eine aktualisierte Version von Jezzipins Antwort erstellt (und ich animiere das Polsteroberteil anstelle der Höhe, aber Sie verstehen immer noch, worum es geht.

 /**
 * ResizeHeaderOnScroll
 *
 * @constructor
 */
var ResizeHeaderOnScroll = function()
{
    this.protocol           = window.location.protocol;
    this.domain             = window.location.host;
};

ResizeHeaderOnScroll.prototype.init    = function()
{
    if($(document).scrollTop() > 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() > 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()
})

Ich habe Jezzipins Antwort genommen und sie so gestaltet, dass beim Scrollen beim Aktualisieren der Seite die richtige Größe gilt. Außerdem wurden einige Dinge entfernt, die nicht unbedingt benötigt werden.

function sizer() {
    if($(document).scrollTop() > 0) {
        $('#header_nav').stop().animate({
            height:'40px'
        },600);
    } else {
        $('#header_nav').stop().animate({
            height:'100px'
        },600);
    }
}

$(window).scroll(function(){
    sizer();
});

sizer();