如何根據滾動位置淡入和淡出導航欄

我有一個垂直導航欄，當用戶在標題下滾動時，我想要顯示並慢慢淡入。同樣，如果用戶滾動到標題上，我希望導航欄消失，並慢慢淡出。這是我目前的功能：如何根據滾動位置淡入和淡出導航欄

$(window).scroll(function() { 
     var scrollPos = $(window).scrollTop(); 
     if (scrollPos < 650) { 
      $('.navbar').fadeOut(4000); 
     } else { 
      $('.navbar').fadeIn(4000); 
     } 
    });

這樣做的問題是，當我滾動頭（或具體地650的位置）之下，導航欄迅速出現在完全不透明，慢慢淡出，然後慢慢變淡回當我滾動到標題上時，它很快就消失了。我如何解決這個問題以獲得理想的行爲？

來源

2017-07-18 nedrathefr

提供小提琴，我無法複製您的問題。我的問題https://jsfiddle.net/pstbq9w7/1/的實現和它工作正常，可能是由JQuery版本引起的。我在小提琴中使用了2.2.4。 – Adriani6

將其更改爲使用css轉換，並且還爲滾動事件添加了輕微的去抖動。石從@ Adriani6的小提琴標記，：P

(function(){ 
 
    var timeout; 
 
    var $window = $(window); 
 
    var $navbar = $('.navbar'); 
 
    
 
    $window.on('scroll', function(e){ 
 
    clearTimeout(timeout); 
 
    
 
    timeout = setTimeout(function(){ 
 
     if ($window.scrollTop() < 650) { 
 
     $navbar.removeClass('hide'); 
 
     } else { 
 
     $navbar.addClass('hide'); 
 
     } 
 
    }, 100); 
 
    }); 
 
}());

body{ 
 
    height: 12000px; 
 
} 
 
.navbar{ 
 
    height: 100px; 
 
    width: 800px; 
 
    background-color: green; 
 
    position: fixed; 
 
    
 
    transition: opacity 4s; 
 
    opacity: 1; 
 
} 
 

 
.navbar.hide { 
 
    opacity: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='navbar'></div>

來源

2017-07-18 22:57:05 Taplar

你應該確保有.navbar隱藏在默認情況下，給它這個CSS

.navbar { 
    display: none; 
}

那麼就應該在沒有該閃光的情況下到達該滾動位置時淡入。

來源

2017-07-18 23:01:30 Johannes

如何根據滾動位置淡入和淡出導航欄

回答

相關問題