jQuery - 向下滚动时会缩小的粘性标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16442016/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - Sticky header that shrinks when scrolling down
提问by user2362529
I wonder how to make a sticky header shrink(with animation) when you scroll down the page and goes back to normal state when the page is scrolled up to the top. Here are two examples to clearify:
我想知道如何在向下滚动页面时缩小粘性标题（带动画），并在页面向上滚动到顶部时恢复正常状态。这里有两个例子需要澄清：
http://themenectar.com/demo/salient/
http://themenectar.com/demo/salient/
http://www.kriesi.at/themes/enfold/
http://www.kriesi.at/themes/enfold/
I get the part to make it fixed, but how should I do to shrink my header when the user scrolls down?
我得到了修复它的部分，但是当用户向下滚动时我应该如何缩小我的标题？
Thanks a ton
万分感谢
回答by jezzipin
This should be what you are looking for using jQuery.
这应该是您使用 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);
}
}
});
Demonstration: http://jsfiddle.net/jezzipin/JJ8Jc/
回答by Sinky
Here a CSS animation fork of jezzipin's Solution, to seperate code from styling.
这里是 jezzipin 解决方案的 CSS 动画分支，用于将代码与样式分开。
JS:
JS：
$(window).on("scroll touchmove", function () {
$('#header_nav').toggleClass('tiny', $(document).scrollTop() > 0);
});
CSS:
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/
http://jsfiddle.net/sinky/S8Fnq/
On scroll/touchmove the css class "tiny" is set to "#header_nav" if "$(document).scrollTop()" is greater than 0.
在滚动/触摸移动时，如果 "$(document).scrollTop()" 大于 0，则 css 类 "tiny" 设置为 "#header_nav"。
CSS transition attribute animates the "height" and "background" attribute nicely.
CSS 过渡属性很好地为“高度”和“背景”属性设置了动画。
回答by lg365
http://callmenick.com/2014/02/18/create-an-animated-resizing-header-on-scroll/
http://callmenick.com/2014/02/18/create-an-animated-resizing-header-on-scroll/
This link has a great tutorial with source code that you can play with, showing how to make elements within the header smaller as well as the header itself.
此链接有一个很棒的教程，其中包含您可以使用的源代码，展示了如何使标题中的元素以及标题本身更小。
回答by Luc Boissaye
Based on twitter scroll trouble (http://ejohn.org/blog/learning-from-twitter/).
基于 twitter 滚动问题 ( http://ejohn.org/blog/learning-from-twitter/)。
Here is my solution, throttling the js scroll event (usefull for mobile devices)
这是我的解决方案，限制 js 滚动事件（对移动设备有用）
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:
CSS：
.menu {
background: pink;
top: 5px;
}
.fixed {
width: 100%;
position: fixed;
top: 0;
}
HTML:
HTML：
<div class="menu">MENU FIXED ON TOP</div>
回答by Collin
I did an upgraded version of jezzipin's answer (and I'm animating padding top instead of height but you still get the point.
我做了 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()
})
回答by Tabetha Moe
I took Jezzipin's answer and made it so that if you are scrolled when you refresh the page, the correct size applies. Also removed some stuff that isn't necessarily needed.
我接受了 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();
