Question

我在我的＆＃34;一页上使用了这种类型的菜单＆＃34;网站：

<ul class="nav navbar-nav">
<li class="item-101 hovernav">  <a href="/site/">Home</a></li>
<li class="item-102 hovernav">  <a class="scroll" href="#about">About</a></li>
<li class="item-103 hovernav">  <a class="scroll" href="#services">Services</a></li>
<li class="item-104 hovernav">  <a class="scroll" href="#our-work">Work</a></li>
</ul>

并且使用此代码我成功地在页面滚动上有活动的菜单项。当我向下滚动到下一个锚时，我看到我的菜单项将其状态更改为活动状态。这是我成功使用的代码：

var sections = jQuery('section')
  , nav = jQuery('nav')
  , nav_height = nav.outerHeight();

jQuery(window).on('scroll', function () {
  var cur_pos = jQuery(this).scrollTop();

  sections.each(function() {
    var top = jQuery(this).offset().top - nav_height,
        bottom = top + jQuery(this).outerHeight();

    if (cur_pos >= top && cur_pos <= bottom) {
      nav.find('a').removeClass('current');
      sections.removeClass('current');

      jQuery(this).addClass('current');
      nav.find('a[href="#'+jQuery(this).attr('id')+'"]').addClass('current');
    }
  });
});

但我最近改变了我的菜单类型：

<ul class="nav navbar-nav level0">
<li itemprop="name" class="current active home-menu-btn" data-id="103" data-level="1" data-class="home-menu-btn">
<a itemprop="url" class="" href="/site/index.php/el/" data-target="#">Home</a>
</li>
<li itemprop="name" class="scroll" data-id="104" data-level="1" data-class="scroll">
<a itemprop="url" class="" href="#about" data-target="#">About</a>
</li>
<li itemprop="name" class="scroll" data-id="105" data-level="1" data-class="scroll">
<a itemprop="url" class="" href="#skills" data-target="#">Skills</a>
</li>
<li itemprop="name" class="scroll" data-id="106" data-level="1" data-class="scroll">
<a itemprop="url" class="" href="#experience" data-target="#">Experience</a>
</li>
</ul>

现在我使用的脚本无效。我想现在代码必须搜索菜单＆＃39; id＆＃39;在＆＃34; a＆＃34;标记，但将类添加到＆＃34; li＆＃34;菜单项标签。这就是区别。但我怎么能做到这一点？

Answer 1

＆＃13;

$(document).ready(function() {
    $(document).on("scroll", onScroll);

  function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
        });
    }
})

＆＃13;

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
ul {
  position: fixed;
  
}
ul li {
    list-style: none;
    margin: 0 30px 0 0;
    display: inline;
}
.active {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    line-height: 50px;
}
a {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: black;
    text-decoration: none;
    line-height: 50px;
}
#home {
    background-color: grey;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
#services {
    background-color: #878775;
    height: 100%;
    width: 100%;
}
#about {
    background-color: blue;
    height: 100%;
    width: 100%;
}
#work {
    background-color: red;
    height: 100%;
    width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="nav navbar-nav">
<li class="item-101 hovernav">  <a href="#home" class="active">Home</a></li>
<li class="item-102 hovernav">  <a class="scroll" href="#about">About</a></li>
<li class="item-103 hovernav">  <a class="scroll" href="#services">Services</a></li>
<li class="item-104 hovernav">  <a class="scroll" href="#work">Work</a></li>
</ul>

<div id="home"></div>
<div id="about"></div>
<div id="services"></div>
<div id="work"></div>

＆＃13;

页面滚动上的活动菜单项

1 个答案: