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

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

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

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

它满足您的需求。

编辑: 根据要求:

<script>

body.addEventListener("滚动", 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 的函数向页面所在的菜单项添加边框，但您可以对其进行调整以执行任何您喜欢的操作并满足您的特定需求。只是一个快速演示。