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

示范: Http://jsfiddle.net/jezzipin/jj8jc/

小开

这里有一个 CSS 动画分支 jezzipin 的解决方案，从样式分离代码。

约翰逊:

$(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”和“ back”属性。

小开

基于 twitter 的滚动故障(http://ejohn.org/blog/learning-from-twitter/)。

下面是我的解决方案，控制 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

小开

Http://callmenick.com/2014/02/18/create-an-animated-resizing-header-on-scroll/

这个链接有一个很棒的教程，其中包含可以使用的源代码，展示了如何使头部内的元素和头部本身一样小。

小开

我做了一个更新版本的 jizipin 的答案(我动画填充顶部而不是高度，但你仍然得到点。

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

小开

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