在網站的不同部分進行標題/導航更改顏色

Question

我正在為我的個人投資組合網站重新設計網站。 我有一個很酷的功能，我的標題/導航欄會根據它所在網頁的哪個部分改變顏色（網站只有一頁）。

我能想到這樣做的唯一方法是將onclick事件添加到轉到頁面不同部分的鏈接，但是當用戶手動滾動到a時，這不允許我更改標題/導航欄的顏色。新的部分。

我想知道是否有人可以指出我正確的方向，因為我不知道從哪里開始。

如果人們想查看它，這是現在的網站：

www.kylebinger.com

這是關於標題的HTML標記

<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>

在此先感謝您的幫助。

Answer 1

JQuery的offset和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>