导航栏在滚动页面时从锚点中添加删除类

Question

我是新来的，但我已经在这个网站上搜索了一段时间的解决方案。

好的，问题来了：

我构建了一个包含多个部分的静态页面。每个部分都可以通过导航栏中的锚链接显示，该链接在页面左侧是静态的。我怎样才能使刚刚显示在屏幕上的该部分的链接处于活动状态？

如果这些部分在外部 html 文件中，这应该很容易。但在我的情况下，我找不到实现这种情况的方法......

<div id="navbar">
    <ul>
         <li><h5><a href="#1" class="active">SERVICE</a> </br> </br></h5></li>
         <li><h5><a href="#2" class="inactive">LEISTUNGEN</a> </br> </br></h5></li>
         <li><h5><a href="#3" class="inactive">ÜBER UNS</a> </br> </br></h5></li>
         <li><h5><a href="#4" class="inactive">PARTNER</a> </br> </br></h5></li>
         <li><h5><a href="#5" class="inactive">KONTAKT</a> </br></h5></li>
    </ul>

我想到了一个 JavaScript 可以更改链接 onclick 的类，但我无法让它工作......

请帮帮我，告诉我该怎么做！

最后但同样重要的是，请原谅我糟糕的英语和编码知识；）

---

关于我要创建的页面的进一步说明！ 这是我的导航菜单，它的位置固定在左边！

<div id="navbar">
        <ul>
             <li><h5><a href="#1">SERVICE</a> </br> </br></h5></li>
             <li><h5><a href="#2">LEISTUNGEN</a> </br> </br></h5></li>
             <li><h5><a href="#3">ÜBER UNS</a> </br> </br></h5></li>
             <li><h5><a href="#4">PARTNER</a> </br> </br></h5></li>
             <li><h5><a href="#5">KONTAKT</a> </br></h5></li>
        </ul>
</div>

它继续一个大的部分，内容是 4 个小部分。这些部分如下所示：

<div id="weiss">
<div id="1" class="content section" data-id="1">



            <div class="page page-1">
                    <div class="topic">
                            <img class="mwlogo" src="media/logo.png"/>      
                    </div>

                    <div class="text">
                            <h2>...</h2>
                    </div>

                <div class="vorteile">

                    <div class="first">
                            <ol>
                                <li><p>...</li>
                                <li><p>...</p></li>
                                <li><p>...</p></li>
                                <li><p>...</p></li>
                                <li><p>...</p></li>
                            </ol>
                    </div>

                    <div class="last">
                            <ol>
                                <li><p>...</p></li>
                                <li><p>...</p></li>
                                <li><p>...</p></li>
                                                                <li><p>...</p></li>
                                                                <li><p>...</p></li>
                                <li><p>...</p></li>
                                <li><p>...</p></li>
                            </ol>
                    </div>

                </div>

            </div>


    </div>
<div>

我在index.html中链接了activemenuitem：

<script type="text/javascript" src="functions/js/activemenuitem.js"></script>

看起来像这样：

function checkActiveSection ()
{
    var fromTop = jQuery(window).scrollTop() ;
    jquery('#weiss .section'.each(function() {
        var sectionOffset = jQuery(this).offset() ;
        if ( sectionOffset.top <= fromTop )
        {
            jQuery('#navbar li').removeClass('active') ;
            jQuery('#navbar li[data-id="'+jQuery(this).data('id')+'"]').addClass('active') ;

        }
    }) ;
}

jQuery(window).scroll(checkActiveSection) ;
jQuery(document).ready(checkActiveSection) ;
jQuery('#navbar li a').click(function(e){
    var idSectionGoto = jQuery(this).closest('li').data('id') ;
    $('html, body').stop().animate({
      scrollTop: jQuery('#weiss .section[data-id="'+idSectionGoto+'"]').offset().top
    }, 300,function(){
        checkActiveSection() ;
    });
     e.preventDefault() ;
}) ;

但问题仍然存在，我似乎没有办法让它工作！该脚本在加载站点时加载，但没有从菜单类中添加或删除类。我需要做什么？！ 请帮帮我！

Answer 1

<script type="text/javascript">
    $(document).ready(function(){
       $(window).scroll(function(e){
var topMargin = jQuery(window).scrollTop() ; 
         if(topMargin  < 100)
         {
                $("#navbar li a").removeClass('active');
            $("#navbar li a.chap1").addClass('active');
         }
         else if(topMargin > 100 && topMargin <200)
         {
              $("#navbar li a").removeClass('active');
                  $("#navbar li a.chap2").addClass('active');
         }   else
         {
                  $("#navbar li a").removeClass('active');
              $("#navbar li a.chap3").addClass('active');
         }  
    });
    });
</script>

<div id="navbar">
    <ul>
         <li><h5><a href="#1" class="chap1 active">SERVICE</a> </br> </br></h5></li>
         <li><h5><a href="#2" class="chap2  inactive">LEISTUNGEN</a> </br> </br></h5></li>
         <li><h5><a href="#3" class="chap3 inactive">ÜBER UNS</a> </br> </br></h5></li>
</ul>
</div>

Answer 2

这是一个根据 Change Active Menu Item on Page Scroll? 改编的解决方案：

http://jsfiddle.net/sX5Kq/1/

即使没有完全优化，它也要简单得多。

<div id="navbar">
    <ul>
         <li><h5><a href="#1">SERVICE</a></h5></li>
         <li><h5><a href="#2">LEISTUNGEN</a></h5></li>
         <li><h5><a href="#3">ÜBER UNS</a></h5></li>
         <li><h5><a href="#4">PARTNER</a></h5></li>
         <li><h5><a href="#5">KONTAKT</a></h5></li>
    </ul>
</div>

<div id="sections">

    <div class="section" data-id="1">
        <h2>Services</h2>
        <p></p>
    </div>

    <div class="section" data-id="2">
        <h2>LEISTUNGEN</h2>
        <p></p>
    </div>

    <div class="section" data-id="3">
        <h2>Section 3</h2>
        <p></p>
    </div>

    <div class="section" data-id="4">
        <h2>Section 4</h2>
        <p></p>
    </div>

    <div class="section" data-id="5">
        <h2>Section 5</h2>
        <p></p>
    </div>

</div>

CSS

body {
    font-family: Helvetica, Arial;
}

#navbar {
    position: fixed;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    width:100px ;
}

#navbar li.active a {
    color:red ;
    font-weight:bold ;
}

#sections {
    margin-left:110px ;
}

JS

function checkActiveSection()
{
    var fromTop = jQuery(window).scrollTop() ;
    jQuery('#sections .section').each(function(){
        var sectionOffset = jQuery(this).offset() ;
        if ( sectionOffset.top <= fromTop )
        {
            jQuery('#navbar li').removeClass('active') ;
            jQuery('#navbar li[data-id="'+jQuery(this).data('id')+'"]').addClass('active') ;

        }
    }) ;
}

jQuery(window).scroll(checkActiveSection) ;
jQuery(document).ready(checkActiveSection) ;
jQuery('#navbar li a').click(function(e){
    var idSectionGoto = jQuery(this).closest('li').data('id') ;
    $('html, body').stop().animate({
      scrollTop: jQuery('#sections .section[data-id="'+idSectionGoto+'"]').offset().top
    }, 300,function(){
        checkActiveSection() ;
    });
     e.preventDefault() ;
}) ;