取決於頁面位置的CSS類

我在頁面頂部有一個固定的導航鏈接，它可以通過jQuery平滑地滾動到頁面的不同部分（ID）。取決於頁面位置的CSS類

是否有任何可能的方式來將CSS類（例如.current）附加到導航鏈接，具體取決於您所處頁面的哪一部分？

例如，當我點擊「關於」時，它會向下滾動到「關於」部分，並且只要您停留在該部分中，導航文本就會變成橙色。

我以前在某個地方看過這個工作，但我不記得網站，甚至不知道如何描述這種行爲來搜索它。

編輯：這裏有一個鏈接到一些siliar什麼我在尋找： http://www.fat-man-collective.com/hello.php

的圖標取決於你的頁面上的位置發生變化。

腳本：

<script> 
    function goToByScroll(id){ 
    $('html,body').animate({scrollTop: $("#"+id).offset().top - 50},'500'); 
    } 
</script>

HTML：

<a href="javascript:void(0)" onClick="goToByScroll('about')">About</a> 

[...] 

<div id="about"> 
    [...] 
</div>

任何幫助是極大的讚賞。

來源

2011-08-12 Grefcs

這可以通過檢查所需元素的offset() *函數，然後編碼來做出相應的響應。您可以跟蹤元素的偏移量，並根據生成的偏移量，相應地應用或刪除相應的類。

*請參閱offset()

來源

2011-08-12 18:30:33 RobB

謝謝......我可以看到這個工作，但我不是很瞭解JavaScript。我沒有在文檔中看到如何根據偏移量應用類/刪除類的示例;只獲得抵消。 – Grefcs

文檔當你點擊在導航部分，只需修改類，以便風格，你希望它是什麼。

其次，您需要在scroll事件中添加一個類似修改導航類的事件處理程序。

來源

2011-08-12 18:32:38 FishBasketGordo

試試這個：

function goToByScroll(id){ 

    $('ul#nav li a').removeClass('active'); // elements in menu 
    $(this).addClass('active'); 
    $('html,body').animate({scrollTop: $("#"+id).offset().top - 50},'500'); 

}

來源

2011-08-12 18:32:55 Sparkup

四年後...對於那些有相同的問題，因爲有希望的OP已經解決了，現在他的問題。

檢出Bootstrap的ScrollSpy插件，該插件「用於根據滾動位置自動更新導航目標。」有關如何使用ScrollSpy插件的示例，請參閱this detailed tutorial關於如何製作浮動的更新導航欄（如Bootstrap站點使用）。

來源

2015-06-16 14:56:56 Paul

取決於頁面位置的CSS類

回答

相關問題