0

在我的网站上，我有一个单页导航菜单。当我点击一个链接时，页面会向下滚动到相应的部分。我正在使用magicline jquery，将悬停的列表项的类设置为“当前”，以实现移动下划线效果。

li但是，当用户查看页面的相应部分时，我还需要将's 类设置为“当前”。我只会做一个点击事件，但是如果用户在没有点击的情况下向下滚动，或者之后向上或向下滚动到不同的部分，这当然不起作用。

到目前为止，这是我尝试过的，但没有成功。有任何想法吗？

<div class="navbar navbar-fixed-top ogNav">
  <div class="navbar-inner">
    <div class="container-fluid">

      <a class="brand" href="index.php">Kyle Hagler</a>
      <div class="nav-collapse collapse nav-wrap">


        <ul class="nav pull-right" id="topnav">
          <li id="homeLink" class="current"><a id="home" href="javascript:;" class="first">Home</a></li>
          <li id="workLink"><a href="#recent">Work</a></li>
          <li id="aboutLink"><a href="#about">About</a></li>
          <li id="contactLink"><a class="last" href="#contact">Contact</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>


    var recent = $('#recent').offset().top; // Get the position of the recent section
    var about = $('#about').offset().top; // Get the position of the about section
    var contact = $('#contact').offset().top; // Get the position of the contact section

     $(window).scroll(function(){ // Window on scroll
            var scroll = $(window).scrollTop(); // Get the position of the scroll

            if(scroll > recent) {
                $('#topnav li').removeClass();
                $('#workLink').addClass('current'); 
            }

            if(scroll > about) {
                $('#topnav li').removeClass();
                $('#aboutLink').addClass('current');
            }   

            if(scroll > contact) { // if scroll is greater than contact position then modify the menu
                $('#topnav li').removeClass();
                $('#contactLink').addClass('current');
            }
        });
4

3 回答 3

1

你可以像这样轻松地做到这一点

var about = $('#about').offset().top; // Get the position of the about section
var contact = $('#contact').offset().top; // Get the position of the contact section

$(window).scroll(function(){ // Window on scroll
    var scroll = $(window).scrollTop(); // Get the position of the scroll
    if(scroll > contact) { // if scroll is greater than contact position then modify the menu
        // Change menu to contact
    if(scroll > about) {
       // Change menu to about 
    }
});
于 2013-07-20T11:47:49.393 回答
0

看看 Bootstrap Scrollspy http://twitter.github.io/bootstrap/javascript.html#scrollspy，也许你可以找到一些对你有用的其他脚本。

于 2013-07-20T11:41:54.330 回答
0

也许是一个调整它的 setInterval。在该函数中，您将测试您的观看距离最近的点。

于 2013-07-20T11:42:29.873 回答