添加活动状态到用户滚动的链接导航

Question

我不确定这是多么可能，但我想我会给它一个镜头。

我有一个简单的滚动浏览网站，每个滚动页面都有独立的部分 - 由颜色明确定义。我有一些固定的导航在右侧，当点击一个链接时，它平滑地向下滚动（或向上）到该部分。这一切工作正常。

我所追求的是导航中的链接颜色随着您滚动到该部分而改变 - 将其标记为“活动”部分。我想我可以做一个简单的'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> 

Answer 1

你可以使用这样的事情：

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/