我想知道当向下滚动页面时如何使粘性标头收缩(带有动画),而当页面向上滚动至顶部时又如何回到正常状态。这里有两个例子需要澄清:
http://themenectar.com/demo/salient/
http://www.kriesi.at/themes/enfold/
我得到了固定的零件,但是当用户向下滚动时,应该如何缩小标题呢?
万分感谢
我想知道当向下滚动页面时如何使粘性标头收缩(带有动画),而当页面向上滚动至顶部时又如何回到正常状态。这里有两个例子需要澄清:
http://themenectar.com/demo/salient/
http://www.kriesi.at/themes/enfold/
我得到了固定的零件,但是当用户向下滚动时,应该如何缩小标题呢?
万分感谢
Answers:
这应该是您使用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解决方案的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”属性设置动画。
$('#header_nav').toggleClass('tiny', $(document).scrollTop() > 0);
$(window).trigger("scroll")
if页面,该页面最初不会显示在顶部。
http://callmenick.com/2014/02/18/create-an-animated-resizing-header-on-scroll/
此链接包含一个很好的教程,其中包含可使用的源代码,显示了如何使标头中的元素以及标头本身变小。
基于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>
我做了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()
})
我回答了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();