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不能在沒有滑動的情況下工作

回答

相關問題