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


74

我想知道当向下滚动页面时如何使粘性标头收缩(带有动画),而当页面向上滚动至顶部时又如何回到正常状态。这里有两个例子需要澄清:

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

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

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

万分感谢


6
发布您的代码。让我们看看您到目前为止已经尝试了什么。
2013年

这种动画标题有名称吗?
zkent

Answers:


105

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

演示:http//jsfiddle.net/jezzipin/JJ8Jc/


您的解决方案几乎是完美的,但我想添加Class()而不是调整高度但不会丢失动画。可能?
eozzy

1
有谁知道为什么这适用于除Safari for iOS之外的所有浏览器?cc @jezzipin
Hugo

4
恐怕我不确定。现在Safari仅在Mac上可用,我没有能力在Safari上进行测试(因为我讨厌Mac,不惜一切代价避免使用Mac),所以我恐怕无法提出解决方案您。
jezzipin 2014年

仅添加/删除一个类并通过CSS转换进行大小转换会更有效。
Teetrinker

1
正如我在下面关于Sinky的答案中提到的那样,使用CSS会限制您的浏览器支持,这意味着效果不会在IE8和IE9上发生。如果要完全支持浏览器,则需要在CSS上使用此方法。
jezzipin 2015年

88

这里是jezzipin解决方案的CSS动画分支,用于将代码与样式分开。

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/

在滚动/触摸移动时,如果“ $(document).scrollTop()”大于0,则将css类“ tiny”设置为“ #header_nav”。

CSS过渡属性可以很好地为“ height”和“ background”属性设置动画。


辛苦了 切记,对于IE9和IE8的用户,过渡不会启动,因为这些浏览器不支持此属性。除此之外,这是一个很棒的解决方案,因为它对于希望减少代码中dom操作量的任何人都是有益的。caniuse.com/#search=transition
jezzipin 2013年

6
@Sinky您可以在一行中完成课程切换 $('#header_nav').toggleClass('tiny', $(document).scrollTop() > 0);
Eric

2
应该是公认的答案。迄今为止最干净的解决方案。
杰弗里·罗森达尔

2
有点旧,但是应该添加一个$(window).trigger("scroll")if页面,该页面最初不会显示在顶部。
拉布德


3

基于Twitter滚动问题(http://ejohn.org/blog/learning-from-twitter/)。

这是我的解决方案,限制js滚动事件(对移动设备有用)

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


非常有用的链接和改进的解决方案,考虑到每个滚动事件上运行代码的性能问题...谢谢!您缓存了$(document)元素,但也可以缓存$('。menu)el,因此代码不会每次都检索它。
nabrown 2015年

0

我做了jezzipin答案的升级版(并且我正在对填充顶部而不是高度进行动画处理,但是您仍然可以理解这一点。

 /**
 * 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

我回答了Jezzipin的回答,并提出了这样的建议,以便在刷新页面时滚动页面时,将应用正确的大小。还删除了一些不必要的东西。

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();
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.