.JS在滾動瀏覽元素後在導航條中淡入

Question

嗨我對JavaScript很新，我只是試圖在到達特定元素/類而不是使用距窗口頂部的距離後淡入導航欄。

// Navigation bar - show on scroll 
$(document).ready(function(){ 

    // hide .navbar first 
    $(".navbar").hide(); 

    // fade in .navbar 
    $(function() { 
     $(window).scroll(function() { 
      // set distance user needs to scroll before we fadeIn navbar 
      if ($(this).scrollTop() > 200) { 
       $('.navbar').fadeIn(); 
      } else { 
       $('.navbar').fadeOut(); 
      } 
     }); 
    }); 

}); 

Answer 1

您可以使用.offset（）來獲取相對於文檔的元素位置。

所以（你window.scroll功能之外做這樣的事情。

var offset = $('.myTriggerClass').offset().top; 

然後改變你的條件

if ($(this).scrollTop() > offset) 

，所以你最終會與

$(".navbar").hide(); 

// set distance user needs to scroll before we fadeIn navbar 
var offset = $('.myTriggerClass').offset().top; 

// fade in .navbar 
$(function() { 
    $(window).scroll(function() { 
     if ($(this).scrollTop() > offset) { 
      $('.navbar').fadeIn(); 
     } else { 
      $('.navbar').fadeOut(); 
     } 
    }); 
});