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

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

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

可以调用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为页面所在的菜单项添加边框，但您可以调整它以执行任何您喜欢的操作并满足您的特定需求。只是一个快速演示。

Bootstrap的"scrollspy"功能中只有这个功能。如果你想推出自己的产品，你可以下载他们的源代码，看看他们是如何实现的：

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

相关内容

最新更新

热门标签：