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
javascript
jquery
html
css
web-deployment
user2362529
quelle
quelle
Antworten:
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/
quelle
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.
quelle
$('#header_nav').toggleClass('tiny', $(document).scrollTop() > 0);
$(window).trigger("scroll")
if-Seite hinzufügen, die anfangs nicht oben angezeigt wird.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.
quelle
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
quelle
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() })
quelle
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();
quelle