使頁眉/導航改變顏色，當在網站的不同部分

我正在爲我的個人作品集網站重新設計一個網站。我有一個很酷的功能，因爲頭部/導航欄會根據網頁的哪一部分改變顏色（網站只有一頁）。使頁眉/導航改變顏色，當在網站的不同部分

我能想到的唯一辦法就是將onclick事件添加到轉到頁面不同部分的鏈接，但是這不會讓我改變標題/導航欄的顏色，以便用戶手動滾動到新的部分。

我想知道如果有人能指出我正確的方向，因爲我不知道從哪裏開始。

下面是網站，目前的情況是，如果人們想查看：

www.kylebinger.com

這是我關於頭提前任何幫助

<header> 
    <div class="container"> 
     <nav> 
      <a href="#home">Welcome</a> 
      <a href="#featuredWork">Work</a> 
      <a href="#caseStudy">Case Study</a> 
      <a href="#about">About</a> 
      <a href="#contact">Contact</a> 
     </nav> 
    </div> 
</header>

由於HTML標記。

來源

2016-01-25 Kyle Bing

JQuery的偏移和scrollTop函數應該做的伎倆。 .offset()獲取元素的當前座標，而.scrollTop()將獲取當前的滾動條位置。比較它們並在條件滿足時更改CSS。見例如：

var top1 = $('#home').offset().top; 
 
var top2 = $('#featuredWork').offset().top; 
 
var top3 = $('#caseStudy').offset().top; 
 

 
$(document).scroll(function() { 
 
    var scrollPos = $(document).scrollTop(); 
 
    if (scrollPos >= top1 && scrollPos < top2) { 
 
    $('#change').css('background-color', '#f00'); 
 
    } else if (scrollPos >= top2 && scrollPos < top3) { 
 
    $('#change').css('background-color', '#0f0'); 
 
    } else if (scrollPos >= top3) { 
 
    $('#change').css('background-color', '#00f'); 
 
    } 
 
});

body { 
 
    margin: 0; 
 
    padding-top: 30px 
 
} 
 
header { 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 30px; 
 
    background-color: #000; 
 
} 
 
section { 
 
    height: 500px; 
 
    background-color: #aaa; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header id="change"> 
 
    <div class="container"> 
 
    <nav> 
 
     <a href="#home">Welcome</a> 
 
     <a href="#featuredWork">Work</a> 
 
     <a href="#caseStudy">Case Study</a> 
 
    </nav> 
 
    </div> 
 
</header> 
 

 
<section id="home">Content</section> 
 
<section id="featuredWork">Content</section> 
 
<section id="caseStudy">Content</section>

來源

2016-01-25 05:01:16

感謝這個有很大幫助！ –

使頁眉/導航改變顏色，當在網站的不同部分

回答

相關問題