it-swarm.com.de

jQuery - Sticky-Header, der beim Scrollen nach unten schrumpft

Ich frage mich, wie man eine verklebte Kopfzeile (mit Animation) verkleinern kann, wenn Sie die Seite nach unten rollen und zum Normalzustand zurückkehren, wenn die Seite nach oben gerollt 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 die Kopfzeile verkleinern, wenn der Benutzer einen Bildlauf durchführt?

Danke vielmals

73
user2362529

Dies sollte genau das sein, was 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/

104
jezzipin

Hier eine CSS-Animationsgabel von jezzipins Solution, 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/Touchmove wird die CSS-Klasse "tiny" auf "#header_nav" gesetzt, wenn "$ (document) .scrollTop ()" größer als 0 ist.

Das CSS-Übergangsattribut animiert das Attribut "Höhe" und "Hintergrund" auf angenehme Weise.

85
Sinky

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, und zeigt, wie Elemente innerhalb des Headers sowie der Header selbst kleiner gemacht werden.

7
lg365

Basierend auf Twitter-Scrollproblemen ( 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

3
Luc Boissaye

Ich habe eine aktualisierte Version der Antwort von Jezzipin erstellt (und ich animiere das Padding-Oberteil anstelle der Höhe, aber Sie bekommen immer noch den Punkt.

 /**
 * 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()
})
0
Collin