想要在滾動到特定元素時更改導航顏色

Question

我想在我的站點的「主」部分滾動到時更改導航欄顏色。

目前我已經改變了顏色，但沒有在那個特定的部分。由於網站的響應式設計，它需要在該部分進行更改。

下面是一個基本的jsfiddle例如：http://jsfiddle.net/Forresty/8ottpo6x/1/

下面是代碼：

HTML：

<nav class="test"></nav> 
<div class="someText"> 
    <p>......</p> 
</div> 
<main></main> 

CSS：

nav { 
    position: fixed; 
    width: 100%; 
    top: 0; 
    height: 4.5em; 
    background: black; 
} 

.main{ 
    width: 400px; 
    height: 2000px; 
    background: gray; 
} 

.black{ 
    background: red; 
} 

使用Javascript：

$(window).scroll (function() { 
    var target = $(this).scrollTop(); 
     if (target >= 500) { 
      $('nav').addClass('black'); 
     }else { 
      $('nav').removeClass('black'); 
     } 
    }); 

我嘗試下面的JavaScript也：

var main = $('main'); 

$(window).scroll (function() { 
    var target = $(this).scrollTop(); 
     if (target >= main) { 
      $('nav').addClass('black'); 
     }else { 
      $('nav').removeClass('black'); 
     } 
    }); 

這並沒有在所有的工作。

任何幫助將不勝感激。

謝謝。

Answer 1

您可以通過$('element').offset().top獲得元素的偏移量。 https://api.jquery.com/offset/

http://jsfiddle.net/1vy7ocjz/1/

var $window = $(window); 
var $main = $('main'); 
var $nav = $('nav'); 
$window.scroll(function() { 
    var target = $window.scrollTop(); 
    if (target >= $main.offset().top) { 
     $nav.addClass('black'); 
    } else { 
     $nav.removeClass('black'); 
    } 
});