如何突出显示单页网站导航栏中的位置？

Question

我使用本教程在我的单页网站上创建“滚动缓动”效果：http://designshack.net/articles/html/how-to-link-to-specific-points-in-a-page-and-animate-the-scroll/

所以我基本上只是使用了 jQuery scrollTo.js 和 localScroll 并在页面上执行它：

$(document).ready(function() {
$('.fixed_nav').localScroll({duration:700});
});

但是，现在我想更进一步，让它在我的导航栏上突出显示当前位置。

有没有办法通过我正在使用的当前教程完成此操作，还是我需要尝试其他方法？

这是我当前用于导航的 HTML 和 CSS：

HTML：

  <div class="fixed_nav_wrapper">
    <nav class="fixed_nav">
            <ul>
                <li><a title="go home" href="#home_link">home</a></li>
                <li><a title="about me" href="#profile_link">me</a></li>
                <li><a title="services" href="#services_link">services</a></li>
                <li><a title="samples" href="#samples_link">work</a></li>
                <li><a title="contact me" href="#contact_link">contact</a></li>
            </ul>
    </nav>
</div>

CSS：

.fixed_nav_wrapper {
  width:710px; 
  margin:0 auto; 
}

.fixed_nav { 
  width:100%; 
  height:50px; 
  margin: -5px auto 0 auto; 
  background-color:transparent;
  z-index:1000;
}

.fixed_nav ul { 
  display:block; 
  margin:0 auto; 
  padding:15px 5px 5px 5px;
  list-style:none;  
}

.fixed_nav ul li { 
  display:inline;
  margin:0 auto; 
  padding:0;
}

.fixed_nav ul li a { 
  display:block; 
  float:left; 
  margin:0 25px; 
  padding:0 5px 0 4px; 
  font-size: 2rem;
  color:rgba(235,235,235,1);
  font-family: Inversionz, sans-serif;
  letter-spacing:-0.25rem;
  text-decoration:none;
 }

.fixed_nav ul li a:hover { 
  color:rgba(255,255,255,1) !important;
 -webkit-box-shadow: 0px 0px 13px 0px rgba(255, 255, 255, 1), 0px 0px  13px 0px rgba(255, 255, 255, 1);
 -moz-box-shadow:    0px 0px 13px 0px rgba(255, 255, 255, 1), 0px 0px 13px 0px rgba(255, 255, 255, 1);
box-shadow:         0px 0px 13px 0px rgba(255, 255, 255, 1), 0px 0px 13px 0px rgba(255, 255, 255, 1); 
}

实际上还有更多，因为当用户向下滚动到某个点时，我有一个“粘性”导航效果，但这是基础。

Answer 1

可以调用jQueryscrollTop()函数返回元素的垂直滚动条位置。

例如：alert(window.scrollTop()); 或 alert(document.scrollTop());，适合您的情况。

它适合您的需求。

编辑：根据要求：

<script>

body.addEventListener("scroll", scrollfunc());

函数滚动函数(){

if(scrollTop() > 100){ 

document.getElementByClassName("menuitem")[0].style.borderBottom="2px solid #2cafe4";

}

if(scrollTop() > 200){ 

document.getElementByClassName("menuitem")[1].style.borderBottom="2px solid #2cafe4";

document.getElementByClassName("menuitem")[0].style.borderBottom="0px";

}

if(scrollTop() > 300){ 

document.getElementByClassName("menuitem")[2].style.borderBottom="2px solid #2cafe4";

document.getElementByClassName("menuitem")[0].style.borderBottom="0px";

document.getElementByClassName("menuitem")[1].style.borderBottom="0px";

}

}

</script>

HTML 标记示例：

<a class="menuitem">1</a> <a class="menuitem">2</a> <a class="menuitem">3</a> 

此示例通过触发onscroll 的函数为页面所在的菜单项添加边框，但您可以对其进行调整以执行您喜欢的任何操作并满足您的特定需求。只是一个快速演示。

Answer 2

Bootstrap 的“scrollspy”功能中正好有这个功能。如果你想自己动手，你可以下载他们的源代码，看看他们是如何实现的：

http://getbootstrap.com/javascript/#scrollspy