Pregunta jQuery: encabezado fijo que se contrae al desplazarse hacia abajo


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


73
2018-05-08 13:28


origen


Respuestas:


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/


104
2018-05-08 13:50



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.


85
2017-09-03 07:06



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.


7
2017-10-17 10:39



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


3
2017-09-24 11:58



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

0
2018-02-21 22:13