添加活動狀態到用戶滾動的鏈接導航

我有一個簡單的滾動瀏覽網站，每個滾動頁面都有獨立的部分 - 由顏色明確定義。我有一些固定的導航在右側，當點擊一個鏈接時，它平滑地向下滾動（或向上）到該部分。這一切工作正常。

我所追求的是導航中的鏈接顏色隨着您滾動到該部分而改變 - 將其標記爲「活動」部分。我想我可以做一個簡單的'addClass'或'css'jQuery，如果點擊它，它會改變，但也有用戶自由滾動的能力，所以如果導航鏈接改變，用戶滾動以確定哪一部分

http://dataveyes.com/en/ - 該網站的工作方式，但導航鏈接會根據您滾動時所處的部分而改變顏色。

我不會發布任何HTML，因爲我想知道這樣的事情是否可能。

UPDATE

HTML導航

<div class="menu-navigation-desktop not-mobile"> 
    <ul> 
     <li class="menu-item-home"><a class="smooth-scroll-no-offset" href="#home"><span class="ss-icon ss-gizmo">home</span></a></li> 
     <li class="menu-item-we"><a class="smooth-scroll" href="#we">We</a></li> 
     <li class="menu-item-design"><a class="smooth-scroll" href="#design">Design</a></li> 
     <li class="menu-item-sustainability"><a class="smooth-scroll" href="#sustainability">Sustainability</a></li> 
     <li class="menu-item-form"><a class="contact-form-action"><span class="ss-icon ss-gizmo">compose</span></a></li> 
     <li class="menu-item-contact"><a class="smooth-scroll" href="#contact"><span class="ss-icon ss-gizmo">phone</span></a></li> 
    </ul> 
</div>

來源

2013-05-01 John the Painter

這聽起來好像你像jQuery的航點後（ http://imakewebthings.com/jquery-waypoints/）。 – Andrew 2013-05-01 11:02:26

嗯，我認爲，基本上，我需要使用jQuery來計算每個部分的高度，然後當您滾動，一旦nav達到計算出的高度max，它會更改爲適合新節？ – 2013-05-01 12:31:23

你可以使用這樣的事情：

var sections = $('.section'); 
$(window).scroll(function() { 
    var currentPosition = $(this).scrollTop(); 
    sections.removeClass('selected').each(function() { 
     var top = $(this).offset().top, 
      bottom = top + $(this).height(); 
     if (currentPosition >= top && currentPosition <= bottom) { 
      $(this).addClass('selected'); 
     } 
    }); 
});

http://jsfiddle.net/GBbu6/1/

來源

2013-05-01 11:04:00 Pete

感謝您 - 我認爲這是非常多的。例如，唯一需要將類應用於導航鏈接列表，而不是實際的幻燈片。有什麼想法嗎？ – 2013-05-01 12:35:00

做鏈接有一個相應的部分ID的href？ – Pete 2013-05-01 13:01:38

用HTML更新了我的導航 - 是的，他們有hrefs :) – 2013-05-01 13:05:55

添加活動狀態到用戶滾動的鏈接導航

回答

相關問題