jQuery - 当向下滚动时收缩的固定页眉

Question

我想知道如何制作一个粘性头部，在向下滚动页面时收缩（带有动画效果），并在页面向上滚动到顶部时恢复正常状态。以下是两个示例，以便更清楚地理解：

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

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

我已经了解了如何使其固定，但是当用户向下滚动时该如何收缩我的标头呢？

非常感谢

- user2362529

---

发表你的代码，让我们看看你到目前为止尝试了什么。 - pmandell

这种类型的动画标题有一个名称吗？ - zkent

Answer 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);
      }  
  }
});

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

- jezzipin

---

你的解决方案几乎完美，但我想使用addClass()而不是调整高度，但不能失去动画效果。有可能吗？ - eozzy

有人知道为什么这个在除了iOS Safari浏览器以外的所有浏览器中都能正常工作吗？@jezzipin - Programmeur Désespéré

很抱歉，我不确定。由于Safari只在Mac上可用，我没有办法在Safari上进行测试（因为我讨厌Mac并尽可能避免使用它们），所以恐怕我无法为您提供解决方案。 - jezzipin

最好的做法是通过添加/删除类并使用CSS转换来进行大小过渡，这样会更有效率。 - Teetrinker

正如我在Sinky的回答中所提到的，使用CSS会限制浏览器的支持，这意味着该效果将不会在IE8和IE9上出现。如果您想要完整的浏览器支持，则需要使用此方法而非CSS。 - jezzipin

Answer 2

这里是 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;
}

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

CSS转换属性可以很好地动画化 "height" 和 "background" 属性。

http://jsfiddle.net/sinky/S8Fnq/

- Sinky

---

干得不错。请注意，对于使用IE9和IE8的用户，转换效果将不会生效，因为这个属性在这些浏览器中不被支持。除此之外，这是一个很棒的解决方案，适用于任何希望减少代码中DOM操作量的人。http://caniuse.com/#search=transition - jezzipin

你可以在一行里切换类的状态，只需要这样写：$('#header_nav').toggleClass('tiny', $(document).scrollTop() > 0); 其中 $('#header_nav') 表示选择 header_nav 的元素，并对它进行类的切换操作，如果 $(document).scrollTop() > 0 为真，则添加名为 tiny 的类，否则移除该类。 - Eric

应该被接受的答案。迄今为止最清晰的解决方案。 - Jeffrey Roosendaal

有点老了，但如果页面最初没有显示在顶部，应该添加 $(window).trigger("scroll")。 - rabudde

Answer 3

这个链接有一个很好的教程和源代码，你可以玩耍，展示如何使头部内的元素更小以及头部本身。

- lg365

---

链接已经失效。 - xmichael91

Answer 4

根据 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

- Luc Boissaye

---

非常有用的链接，并改进了解决方案，考虑到在每次滚动事件上运行代码的性能问题...谢谢！您已缓存了$(document)元素，但您也可以缓存$('.menu')元素，以便代码不必每次都检索它。 - nabrown

Answer 5

我采用了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();

- Tabetha Moe

Answer 6

我升级了jezzipin的答案（我正在动画化padding top而不是高度，但你仍然可以理解意思。）

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

- Collin