Question

我用这个教程来创建＆＃34;滚动缓动＆＃34;影响我的单页网站：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); 
}

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

Answer 1

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

Ex：alert(window.scrollTop());或alert(document.scrollTop());，适用于您的情况。

它适合您的需求。

编辑：按照要求：

<script>

body.addEventListener（“scroll”，scrollfunc（））;

function 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

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

2 个答案: