jQuery：动画（）；有延迟时间

Question

我需要一些关于 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();
});

Answer 1

我认为您的问题是您调用“每个”滚动的 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);

....但即使这样也经常调用不必要的 animate 函数....我认为更好的是：

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

}   
    };

Answer 2

Issue with an animated, sticky navigation in jQuery可能重复
此外，您可以检查一些 jQuery 插件来完成这项工作，例如 http://stickyjs.com/