我需要一些关于animate()jQuery函数的帮助。
我想滚动时将白色条滚动到较小的位置,当你回到页面顶部时,白条会恢复正常。当我滚动它时,它可以正常工作,但当我滚动白色条时延迟恢复正常,我不知道为什么。我不想要它。 如果可以,请帮助我。谢谢!抱歉我的英文。
HTML:
<div id="header">
<div id="sticky_navigation">
<div class="container">
<div class="row-fluid">
<!-- Logo Block -->
<div class="span2">
<a href="#"><div class="logo1"></div></a>
</div>
<!-- Nav Block -->
<div class="span6">
<ul class="nav">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Faq</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
<!-- Contact Block -->
<div class="span4">
<ul class="contact-list pull-right">
<li><a href="#"><span class="contact"></span>Contact Us</a></li>
<li><a href="#"><span class="cell"></span>(03) 9028 2424</a></li>
</ul>
</div>
</div>
</div>
</div>
</div><!-- #header -->
CSS:
.header {
border-bottom: 1px solid #a4a4a4;
}
#sticky_navigation {
width: 100%;
z-index: 200;
background: #fff;
border-bottom: 1px solid #a4a4a4;
}
.logo1 {
background-position: 0 -186px ;
width: 169px;
height: 27px;
margin: 30px 0 28px 0;
}
.nav {
margin:39px 0 0 0px;
}
.nav li {
float: left;
margin-left: 25px
}
.nav li a, .contact-list li a {
text-transform: uppercase;
text-decoration: none;
color: #777777;
font-size: 18px;
font-weight: bold;
background-color: none;
}
.nav li a:hover, .nav li a.active {
color: #000;
background-color: none;
}
.contact-list {
margin: 39px 0 0 0;
}
.contact-list li {
float: left;
}
.contact-list li:first-child {
margin-right: 32px;
}
.contact, .cell {
display: block;
float: left;
margin:2px 9px 0 0;
}
.cell {
background-position: -201px -101px ;
width: 16px;
height: 16px;
}
.contact {
background-position: -178px -101px ;
width: 19px;
height: 15px;
}
JS:
var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop();
if (scroll_top > sticky_navigation_offset_top) {
$('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });
$( ".logo1" ).animate({ marginTop: '10px' }, 1000);
$( ".nav" ).animate({ marginTop: '19px'}, 1000);
$( ".contact-list" ).animate({ marginTop: '19px' }, 1000);
} else {
$('#sticky_navigation').css({ 'position': 'relative' });
$( ".logo1" ).animate({ marginTop: '30px' }, 1000);
$( ".nav" ).animate({ marginTop: '39px'}, 1000);
$( ".contact-list" ).animate({ marginTop: '39px' }, 1000);
}
};
sticky_navigation();
$(window).scroll(function() {
sticky_navigation();
});
答案 0 :(得分:1)
我认为你的问题是你在“every”上调用了sticky-navigation()函数。因此,如果用户滚动sticky_navigation()被调用几次,动画将进入队列。这会导致延误。我想在元素上调用stop()函数会产生你想要的效果。
$( ".logo1" ).stop(true,true).animate({ marginTop: '10px' }, 1000);
$( ".nav" ).stop(true,true).animate({ marginTop: '19px'}, 1000);
$( ".contact-list" ).stop(true,true).animate({ marginTop: '19px' }, 1000);
和
$( ".logo1" ).stop(true,true).animate({ marginTop: '30px' }, 1000);
$( ".nav" ).stop(true,true).animate({ marginTop: '39px'}, 1000);
$( ".contact-list" ).stop(true,true).animate({ marginTop: '39px' }, 1000);
....但是即使这个通常也不需要动画函数....我认为更好的是:
function sticky_navigation(){
var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop();
var sDown = true;
var sUp = false; // could also be true (and must be true if you scrollDown by Default with JavaScript after pageload)
if (scroll_top > sticky_navigation_offset_top) {
if(sDown){
sDown = false;
sUp = true;
$('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });
$( ".logo1" ).stop(true,true).animate({ marginTop: '10px' }, 1000);
$( ".nav" ).stop(true,true).animate({ marginTop: '19px'}, 1000);
$( ".contact-list" ).stop(true,true).animate({ marginTop: '19px' }, 1000);
}
} else {
if(sUp){
sUp=false;
sDown=true;
$('#sticky_navigation').css({ 'position': 'relative' });
$( ".logo1" ).stop(true,true).animate({ marginTop: '30px' }, 1000);
$( ".nav" ).stop(true,true).animate({ marginTop: '39px'}, 1000);
$( ".contact-list" ).stop(true,true).animate({ marginTop: '39px' }, 1000);
}
}
};
答案 1 :(得分:0)
Issue with an animated, sticky navigation in jQuery的可能重复
此外,您可以查看一些jQuery插件,例如http://stickyjs.com/