jQuery slideDown不能在没有滑动的情况下工作

我正在制作一个动画粘滞标题。一旦您滚动到某个点以下，标题应从顶部滑入并保持固定，直到您滚回点之上。jQuery slideDown不能在没有滑动的情况下工作

这里是jsfiddle，如果你删除了对slideUP的评论，它工作正常。

HTML：

<div class="nav-container"> 
    <div class="nav"> 
     <div id="bad"> </div> 
    </div> 
</div> 
<p> long content here </p>

CSS：

.f-nav{ 
    z-index: 9999; 
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 100%; 
} 

#bad{ 
    width: 100%; 
    height: 50px; 
    background-color: yellow; 
}

JS：

var nav=$('.nav-container'); 
$(window).scroll(function(){ 
    if($(this).scrollTop() > 200) { 
     nav.addClass('f-nav'); 
     nav.slideDown('slow'); 
     $('#bad').css('background-color','red'); 
    } else { 
     nav.removeClass('f-nav'); 
     //nav.slideUp('slow'); 
     $('#bad').css('background-color','yellow'); 
    } 
});

这究竟是为什么？

来源

2013-05-02 rk.

它工作正常，我上的jsfiddle没有效果基本show – cpjolicoeur 2013-05-02 16:37:39

@rk。这是因为当你滚动时，你总是做一个滑动，所以导航不显示... – PSL 2013-05-02 16:39:44

对于我也只有当你改变最小结果窗口的高度。 – WooCaSh 2013-05-02 16:40:17

jQuery slideDown是为了处理隐藏的元素。如果元素已经可见，则不会看到效果。要解决此问题，请在.slideDown之前的元素上添加.hide()。就像这样：http://jsfiddle.net/Dk8UA/3/

添加.slideUp当它工作的原因，就是效果基本show隐藏的元素。

更新： 您可以添加一个if条件来检查nav是否已经有类，以避免每次滚动时执行动画。

var nav = $('.nav-container'); 
$(window).scroll(function() { 
    if ($(this).scrollTop() > 200) { 
     if (!nav.hasClass('f-nav')) { 
      nav.addClass("f-nav"); 
      nav.hide(); 
      nav.slideDown("slow"); 
      $('#bad').css('background-color', 'red'); 
     } 
    } else { 
     nav.removeClass("f-nav"); 
     // nav.slideUp("slow"); 
     $('#bad').css('background-color', 'yellow'); 
    } 
});

http://jsfiddle.net/Dk8UA/13/

来源

2013-05-02 16:41:08 mkhatib

解释它:) – 2013-05-02 16:44:31

顺便说一下，有没有什么办法阻止它从我重新设置每次滚动？我需要将它固定为标题。 – 2013-05-02 16:52:45

是的。更新了答案以反映您的评论。注意'if（！nav.hasClass（'f-nav'））' – mkhatib 2013-05-02 17:51:03

jQuery slideDown不能在没有滑动的情况下工作

回答

相关问题