jQuery: animate(); с временем задержки

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

.... но даже это вызывает ненужный часто функция одушевленные .... я думаю, что лучше было бы:

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/