javascript - heroku dashboard login

jQuery: encabezado fijo que se contrae al desplazarse hacia abajo

Question

Me pregunto cómo hacer que un encabezado adhesivo se contraiga (con animación) cuando se desplaza hacia abajo por la página y vuelve al estado normal cuando la página se desplaza hacia arriba. Aquí hay dos ejemplos para limpiar:

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

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

Obtengo la pieza para arreglarlo, pero ¿cómo debo hacer para reducir mi encabezado cuando el usuario se desplaza hacia abajo?

Gracias una tonelada

Answer 1

Aquí un tenedor de animación CSS de la solución de Jezzipin, para separar el código del estilo.

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/

En scroll / touchmove, la clase css "tiny" está configurada en "#header_nav" si "$ (document) .scrollTop ()" es mayor que 0.

El atributo de transición CSS anima el atributo "alto" y "fondo" muy bien.

Answer 2

Basado en los problemas de desplazamiento de twitter ( http://ejohn.org/blog/learning-from-twitter/ ).

Aquí está mi solución, acelerando el evento scroll js (útil para dispositivos móviles)

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 3

Esto debería ser lo que estás buscando usando 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);
}
}
});

Demostración: http://jsfiddle.net/jezzipin/JJ8Jc/

Answer 4

Hice una versión mejorada de la respuesta de jezzipin (y estoy animando el relleno superior en lugar de la altura, pero todavía entiendes el punto.

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

Answer 5

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

Este enlace tiene un excelente tutorial con código fuente con el que puedes jugar, que muestra cómo hacer que los elementos dentro del encabezado sean más pequeños, así como también el encabezado.