jQuery - 向下滚动时收缩的粘滞标题
我想知道当您向下滚动页面时如何制作粘滞标题收缩（使用动画），并在页面向上滚动时返回正常状态。这里有两个例子来clearify：jQuery - 向下滚动时收缩的粘滞标题
http://themenectar.com/demo/salient/
http://www.kriesi.at/themes/enfold/
我得到使它固定的一部分，但我应该怎么做才能缩小我的头当用户滚动下来？
谢谢你一吨
这应该是你正在寻找使用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);
}
}
});
像梦一样工作，谢谢Jezzipin。 – user2362529 2013-05-09 10:04:00
不用担心。很高兴我可以帮助:-) – jezzipin 2013-05-09 10:11:56
好工作的人。继续:) – 2013-07-08 06:46:42
这里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/
在滚动/ touchmove的CSS类 “微小” 被设置为 “#header_nav” 如果“的$（document） .scrollTop（）“大于0.
CSS过渡属性动画”高度“和”背景und“属性。
不错的工作。请记住，对于IE9和IE8用户而言，由于此属性在这些浏览器中不受支持，转换不会启动。除此之外，这是一个很好的解决方案，因为它有利于任何人减少代码中的dom操作数量。 http://caniuse.com/#search=transition – jezzipin 2013-12-04 14:29:16
@Sinky你可以在同一行中做类切换 '$（'＃header_nav'）。toggleClass（'tiny'，$（document）.scrollTop（）> 0）;' – Eric 2014-01-13 20:14:57
应该是被接受的答案。迄今为止最干净的解决方案。 – 2016-10-11 08:42:18
基于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>
非常有用的链接和改进的解决方案考虑到每个滚动事件上运行代码的性能问题......谢谢！你缓存了$（document）元素，但是你也可以缓存$（'。menu）el，所以代码不会每次都检索它。 – nabrown78 2015-02-10 15:22:22
http://callmenick.com/2014/02/18/create-an-animated-resizing-header-on-scroll/
此链接与源代码，你可以玩，展示如何将头较小，以及头本身内作出元素伟大的教程。
感谢您的链接。很好地解释 – mboko 2015-05-07 12:27:12
我做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()
})
发布您的代码。让我们来看看你迄今尝试过。 – pmandell 2013-05-08 13:29:10
是否有这种类型的动画标题的名称？ – zkent 2017-03-21 01:23:36