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

Question

我使用本教程在我的单页网站上创建了 "scroll easing" 效果：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); 
}

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

Answer 1

可以调用 jQuery scrollTop() 函数来 return 元素的垂直滚动条位置。

例如：alert(window.scrollTop()); 或 alert(document.scrollTop());，视您的情况而定。

满足您的需求。

编辑： 根据要求：

<script>

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

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

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

How can I highlight position in nav bar for single-page website?

javascript

jquery

css

position

highlight