一尘不染

jQuery-向下滚动时会缩小的粘性标头

css

我想知道当向下滚动页面时如何使粘性标头收缩(带有动画),而当页面向上滚动至顶部时又如何回到正常状态。

我得到了固定的零件,但是当用户向下滚动时,应该如何缩小标题呢?

万分感谢


阅读 246

收藏
2020-05-16

共1个答案

一尘不染

这应该是您使用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);
      }  
  }
});
2020-05-16