未从div下拉列表中的链接中删除类

Question

我正在个人网站上工作。

在此网站中，当我滚动到与该导航链接相关的页面部分时，我希望导航链接变为活动状态，然后所有其他活动链接都应删除nav-active类。

我部分工作，导航链接正确突出显示。我不明白为什么当滚动移动到div下拉按钮下的链接时，不会删除活动突出显示。

有人能指出我正确的方向，并指出一些有关此问题的相关信息的教程/阅读（不太高级）吗？

我的笔在这里：

https://codepen.io/pjsmyth/pen/ZvaZBO/

提前致谢

皮特

以下代码：

$(document).ready(function() {
      	
    	var scrollLink = $('.scroll');
    
    	// Smooth scrolling
    	scrollLink.click(function(e) {
    
    		e.preventDefault();
    		$('body,html').animate({
    			scrollTop: $(this.hash).offset().top
    		}, 1000 );
    	});
    
      // Active link switching
      $(window).scroll(function() {
        var scrollbarLocation = $(this).scrollTop();
        
        scrollLink.each(function() {
          
          var sectionOffset = $(this.hash).offset().top - 20;
          
          if ( sectionOffset <= scrollbarLocation ) {
            $(this).addClass('nav-active');
            $(this).siblings().removeClass('nav-active');
            $(this).children().removeClass('nav-active');
          }
        })
        
      })
    
    });

/*
Fonts used in this site
font-family: 'Indie Flower', cursive;
font-family: 'Petit Formal Script', cursive;
font-family: 'Raleway', sans-serif;
font-family: 'Farsan', cursive;
font-family: 'Oleo Script', cursive;
font-family: 'Yeseva One', cursive;
*/

/* CSS custom properties (variables) */
:root {
    --orange: #F9A828;
    --lightGrey: #ECECEB;
    --teal: #07617D;
    --darkGreyBlue: #2E383F;
    --darkGreyBlueTint: #718A9B;
}

* {
    margin: 0px;
    padding: 0;
    border: none;
    font-size: 1em;
    /*border: 1px red solid;*/
}

.hidden {
    display: none;
}

/*--------- Navigation Area ---------*/
body nav {
    height: 5vh;
    width: 100%;
    font-family: 'Raleway', sans-serif;
    position: fixed;
    background-color: var(--darkGreyBlue);
    color: var(--lightGrey);
    z-index: 10;
}

.nav-active {
    color: var(--orange) !important;
    height: 5vh;
    /*border-width: 0;
    padding: 0 10px;
    float: right;*/
}

/*--------- Navigation Branding Area ---------*/
.branding {
    line-height: 5vh;
    float: left;
    height: 5vh;
    padding-left: 5%;
}

.branding i {
    float: left;
    padding-top: 1.6vh;
    color: var(--orange);
}

.branding div {
    display: inline;
    padding-left: 5px;
}

/*--------- Navigation Links Area ---------*/
.navLinks {
    padding-right: 5%;
    float: right;
}

.navLinks a {
    line-height: 5vh;
    float: none;
    color: var(--lightGrey);
    padding: 0px 10px;
    text-decoration: none;
    display: inline-block;
    text-align: left;
}



.dropdown {
    float: right;
    overflow: hidden;
}

.dropdown .dropbtn {
    border: none;
    outline: none;
    color: var(--lightGrey);
    line-height: 5vh;
    text-align: left;
    background-color: inherit;
    min-width: 75px;
    padding: 0 10px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;

}

.dropdown-content a {
    float: none;
    color: var(--orange);
    padding: 0px 10px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: var(--darkGreyBlue);
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown a {
    float: none;
    height: 5vh;
    line-height: 5vh;
    text-decoration: none;
    background-color: var(--darkGreyBlue);
    border-width: 0;
    color: var(--lightGrey);
    padding: 0 10px;

}

.navLinks a:hover, .dropdown:hover .dropbtn {
    color: var(--orange);
    /*color: var(--darkGreyBlue);*/
}

/*--------- Splashscreen Area ---------*/
body div.splashScreen {
    height: 100vh;
    background-color: var(--darkGreyBlueTint);
    font-family: 'Raleway', sans-serif;
    color: var(--lightGrey);
    text-align: center;
}

body div.splashScreen div.splashText {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

body div.splashScreen div.splashText h1 {
    font-family: 'Oleo Script', cursive;
    font-size: 7em;
    padding-bottom: 10px;

}

body div.splashScreen div.splashText a button {
    font-size: 2em;
    font-family: 'Raleway', sans-serif;
    padding: 5px 10px;
    background-color: var(--darkGreyBlueTint);
    border-radius: 20px;
    border: 1px solid var(--lightGrey);
    color: var(--lightGrey);
    transition: all 0.5s ease-in;
}

body div.splashScreen div.splashText a button:hover {
    font-size: 2em;
    font-family: 'Raleway', sans-serif;
    padding: 5px 10px;
    background-color: var(--lightGrey);
    border-radius: 20px;
    border: 1px solid var(--darkGreyBlueTint);
    color: var(--darkGreyBlueTint);
}

body div.splashScreen div.splashText a button:active {
    font-size: 2em;
    font-family: 'Raleway', sans-serif;
    padding: 5px 10px;
    background-color: var(--darkGreyBlueTint);
    border-radius: 20px;
    color: var(--lightGrey);
}

/*--------- About Area ---------*/
body div.aboutPage {
    height: 100vh;
    background-color: var(--lightGrey);
    font-family: 'Indie Flower', cursive;
    font-size: 300;
    color: var(--darkGreyBlue);
}

body div.aboutPage header {
    padding-top: 7vh;
    width: 90%;
    margin: 0 auto;
}

/*--------- Experience Area ---------*/
body div.experiencePage {
    height: 100vh;
    background-color: var(--darkGreyBlueTint);
    font-family: 'Indie Flower', cursive;
    font-size: 300;
    color: var(--lightGrey);
}

body div.experiencePage header {
    padding-top: 7vh;
    width: 90%;
    margin: 0 auto;
}

/*--------- Skills Area ---------*/
body div.skillsPage {
    height: 100vh;
    background-color: var(--lightGrey);
    font-family: 'Indie Flower', cursive;
    font-size: 300;
    color: var(--darkGreyBlue);
}

body div.skillsPage header {
    padding-top: 7vh;
    width: 90%;
    margin: 0 auto;
}

/*--------- Portfolio Area ---------*/
body div.portfolioPage {
    height: 100vh;
    background-color: var(--darkGreyBlueTint);
    font-family: 'Indie Flower', cursive;
    font-size: 300;
    color: var(--lightGrey);
}

body div.portfolioPage header {
    padding-top: 7vh;
    width: 90%;
    margin: 0 auto;
}

/*--------- Photography Area ---------*/
body div.photographyPage {
    height: 100vh;
    background-color: var(--lightGrey);
    font-family: 'Indie Flower', cursive;
    font-size: 300;
    color: var(--darkGreyBlue);
}

body div.photographyPage header {
    padding-top: 7vh;
    width: 90%;
    margin: 0 auto;
}

/*--------- Favourites Area ---------*/
body div.favouritesPage {
    height: 100vh;
    background-color: var(--darkGreyBlueTint);
    font-family: 'Indie Flower', cursive;
    font-size: 300;
    color: var(--lightGrey);
}

body div.favouritesPage header {
    padding-top: 7vh;
    width: 90%;
    margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html >
    <head>
    <meta charset="UTF-8">
        <title>Personal Website of Pete</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://fonts.googleapis.com/css?family=Farsan|Indie+Flower|Oleo+Script:700|Petit+Formal+Script|Raleway|Yeseva+One" rel="stylesheet">
        <link rel="stylesheet" href="css/custom.css">
        <script src="https://use.fontawesome.com/71da83f6b4.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script type="text/javascript" src="./js/custom.js"></script>
    </head>

<body>
    <!--  Start Navigation Section -->
    <nav>
        <span class="branding">
            <i class="fa fa-hand-peace-o" aria-hidden="true"></i>
            <div>Pete Smyth</div>
        </span>
        <div class="navLinks">
            <div class="dropdown">
                <button class="dropbtn">Interests&nbsp<i class="fa fa-caret-down" aria-hidden="true"></i>
                </button>
                <div class="dropdown-content">
                    <a class="scroll" href="#bk-photography">Photography</a>
                    <a class="scroll" href="#bk-favourites">Favourites</a>
                </div>
            </div>
            <div class="dropdown">
                <button class="dropbtn">Resume&nbsp<i class="fa fa-caret-down" aria-hidden="true"></i>
                </button>
                <div class="dropdown-content">
                    <a class="scroll" href="#bk-resume-experience">Experience</a>
                    <a class="scroll" href="#bk-resume-skills">Skills</a>
                    <a class="scroll" href="#bk-resume-portfolio">Portfolio</a>
                </div>
            </div>
            <a class="scroll nav-active" href="#bk-splash">Home</a>
            <a class="scroll" href="#bk-about">About</a>

        </div>          
    </nav>
    <!--  End Navigation Section -->

    <!--  Start Splashscreen Section -->
    <div id="bk-splash" class="splashScreen">
        <div  class="splashText">
            <h1>
                Pete Smyth
            </h1>
            <a href="#bk-about"><button>Learn More</button></a>
        </div>
        <!-- end of splashText class -->
    </div>
    <!--  End Splashscreen Section -->

    <!--  Start About Section -->
    <div id="bk-about" class="aboutPage">
        <header>
            <h1>Here's the Goss</h1>
        </header>

    </div>
    <!--  End About Section -->

    <!--  Start Resume Experience Section -->
    <div id="bk-resume-experience" class="experiencePage">
        <header>
            <h1>Pete's Experiences</h1>
        </header>

    </div>
    <!--  End Resume Experience Section -->

    <!--  Start Resume Skills Section -->
    <div id="bk-resume-skills" class="skillsPage">
        <header>
            <h1>Pete's Skills</h1>
        </header>

    </div>
    <!--  End Resume Skills Section -->

    <!--  Start Portfolio Section -->
    <div id="bk-resume-portfolio" class="portfolioPage">
        <header>
            <h1>Pete's Portfolio</h1>
        </header>

    </div>
    <!--  End Portfolio Section -->

    <!--  Start Photography Section -->
    <div id="bk-photography" class="photographyPage">
        <header>
            <h1>Pete's Photography</h1>
        </header>

    </div>
    <!--  End Photography Section -->

    <!--  Start Favourites Section -->
    <div id="bk-favourites" class="favouritesPage">
        <header>
            <h1>Pete's Favourites</h1>
        </header>

    </div>
    <!--  End Favourites Section -->
</body>

Answer 1

那是因为你的DOM的顺序不正确。在你的DOM中，“About”是带有.scroll的最后一个DOM元素，并且由于About对sectionOffset <= scrollbarLocation也有效并且是最后一个要处理的项目，它会覆盖其他导航元素的类操作。在屏幕上。

我部分修复了它in this demo here。

Answer 2

你的条件选择逻辑有点困惑。现在设置的方式是，如果sectionOffset小于scrollbarLocation，那么您尝试在当前链接上设置nav-active类，并将其从兄弟姐妹，孩子和父链接。

问题在于，如果当前链接本身是子链接，那么您要取消设置的链接将成为链接的兄弟，父级的兄弟链接或父母的兄弟姐妹的链接。

您可以手动覆盖所有这些案例，但随后您的代码会变得错综复杂。如果在将来的某个时候，您想要添加额外的链接嵌套层，该怎么办？你必须手动说明这一点。

幸运的是，由于您已经在滚动事件中循环浏览了所有链接，因此有一种更简单的方法。只需检查某个部分是否已滚出屏幕，并通过更改nav-active回调来删除其相关链接的each类：

scrollLink.each(function() {

  var sectionOffset = $(this.hash).offset().top - 20;
  var sectionBottom = sectionOffset + $(this.hash).height();

  if ( sectionOffset <= scrollbarLocation && sectionBottom >= scrollbarLocation) {
    $(this).addClass('nav-active');
  } else {
    $(this).removeClass('nav-active');
  }
})

Updated CodePen

这是一个片段：

$(document).ready(function() {
  	
	var scrollLink = $('.scroll');

	// Smooth scrolling
	scrollLink.click(function(e) {

		e.preventDefault();
		$('body,html').animate({
			scrollTop: $(this.hash).offset().top
		}, 1000 );
	});

  // Active link switching
  $(window).scroll(function() {
    var scrollbarLocation = $(this).scrollTop();
    
    scrollLink.each(function() {
      
      var sectionOffset = $(this.hash).offset().top - 20;
      var sectionBottom = sectionOffset + $(this.hash).height();
      
      if ( sectionOffset <= scrollbarLocation && sectionBottom >= scrollbarLocation) {
        $(this).addClass('nav-active');
      } else {
        $(this).removeClass('nav-active');
      }
    })
    
  })

});

/*
Fonts used in this site
font-family: 'Indie Flower', cursive;
font-family: 'Petit Formal Script', cursive;
font-family: 'Raleway', sans-serif;
font-family: 'Farsan', cursive;
font-family: 'Oleo Script', cursive;
font-family: 'Yeseva One', cursive;
*/

/* CSS custom properties (variables) */
:root {
    --orange: #F9A828;
    --lightGrey: #ECECEB;
    --teal: #07617D;
    --darkGreyBlue: #2E383F;
    --darkGreyBlueTint: #718A9B;
}

* {
    margin: 0px;
    padding: 0;
    border: none;
    font-size: 1em;
    /*border: 1px red solid;*/
}

.hidden {
    display: none;
}

/*--------- Navigation Area ---------*/
body nav {
    height: 5vh;
    width: 100%;
    font-family: 'Raleway', sans-serif;
    position: fixed;
    background-color: var(--darkGreyBlue);
    color: var(--lightGrey);
    z-index: 10;
}

.nav-active {
    color: var(--orange) !important;
    height: 5vh;
    /*border-width: 0;
    padding: 0 10px;
    float: right;*/
}

/*--------- Navigation Branding Area ---------*/
.branding {
    line-height: 5vh;
    float: left;
    height: 5vh;
    padding-left: 5%;
}

.branding i {
    float: left;
    padding-top: 1.6vh;
    color: var(--orange);
}

.branding div {
    display: inline;
    padding-left: 5px;
}

/*--------- Navigation Links Area ---------*/
.navLinks {
    padding-right: 5%;
    float: right;
}

.navLinks a {
    line-height: 5vh;
    float: none;
    color: var(--lightGrey);
    padding: 0px 10px;
    text-decoration: none;
    display: inline-block;
    text-align: left;
}



.dropdown {
    float: right;
    overflow: hidden;
}

.dropdown .dropbtn {
    border: none;
    outline: none;
    color: var(--lightGrey);
    line-height: 5vh;
    text-align: left;
    background-color: inherit;
    min-width: 75px;
    padding: 0 10px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;

}

.dropdown-content a {
    float: none;
    color: var(--orange);
    padding: 0px 10px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: var(--darkGreyBlue);
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown a {
    float: none;
    height: 5vh;
    line-height: 5vh;
    text-decoration: none;
    background-color: var(--darkGreyBlue);
    border-width: 0;
    color: var(--lightGrey);
    padding: 0 10px;

}

.navLinks a:hover, .dropdown:hover .dropbtn {
    color: var(--orange);
    /*color: var(--darkGreyBlue);*/
}

/*--------- Splashscreen Area ---------*/
body div.splashScreen {
    height: 100vh;
    background-color: var(--darkGreyBlueTint);
    font-family: 'Raleway', sans-serif;
    color: var(--lightGrey);
    text-align: center;
}

body div.splashScreen div.splashText {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

body div.splashScreen div.splashText h1 {
    font-family: 'Oleo Script', cursive;
    font-size: 7em;
    padding-bottom: 10px;

}

body div.splashScreen div.splashText a button {
    font-size: 2em;
    font-family: 'Raleway', sans-serif;
    padding: 5px 10px;
    background-color: var(--darkGreyBlueTint);
    border-radius: 20px;
    border: 1px solid var(--lightGrey);
    color: var(--lightGrey);
    transition: all 0.5s ease-in;
}

body div.splashScreen div.splashText a button:hover {
    font-size: 2em;
    font-family: 'Raleway', sans-serif;
    padding: 5px 10px;
    background-color: var(--lightGrey);
    border-radius: 20px;
    border: 1px solid var(--darkGreyBlueTint);
    color: var(--darkGreyBlueTint);
}

body div.splashScreen div.splashText a button:active {
    font-size: 2em;
    font-family: 'Raleway', sans-serif;
    padding: 5px 10px;
    background-color: var(--darkGreyBlueTint);
    border-radius: 20px;
    color: var(--lightGrey);
}

/*--------- About Area ---------*/
body div.aboutPage {
    height: 100vh;
    background-color: var(--lightGrey);
    font-family: 'Indie Flower', cursive;
    font-size: 300;
    color: var(--darkGreyBlue);
}

body div.aboutPage header {
    padding-top: 7vh;
    width: 90%;
    margin: 0 auto;
}

/*--------- Experience Area ---------*/
body div.experiencePage {
    height: 100vh;
    background-color: var(--darkGreyBlueTint);
    font-family: 'Indie Flower', cursive;
    font-size: 300;
    color: var(--lightGrey);
}

body div.experiencePage header {
    padding-top: 7vh;
    width: 90%;
    margin: 0 auto;
}

/*--------- Skills Area ---------*/
body div.skillsPage {
    height: 100vh;
    background-color: var(--lightGrey);
    font-family: 'Indie Flower', cursive;
    font-size: 300;
    color: var(--darkGreyBlue);
}

body div.skillsPage header {
    padding-top: 7vh;
    width: 90%;
    margin: 0 auto;
}

/*--------- Portfolio Area ---------*/
body div.portfolioPage {
    height: 100vh;
    background-color: var(--darkGreyBlueTint);
    font-family: 'Indie Flower', cursive;
    font-size: 300;
    color: var(--lightGrey);
}

body div.portfolioPage header {
    padding-top: 7vh;
    width: 90%;
    margin: 0 auto;
}

/*--------- Photography Area ---------*/
body div.photographyPage {
    height: 100vh;
    background-color: var(--lightGrey);
    font-family: 'Indie Flower', cursive;
    font-size: 300;
    color: var(--darkGreyBlue);
}

body div.photographyPage header {
    padding-top: 7vh;
    width: 90%;
    margin: 0 auto;
}

/*--------- Favourites Area ---------*/
body div.favouritesPage {
    height: 100vh;
    background-color: var(--darkGreyBlueTint);
    font-family: 'Indie Flower', cursive;
    font-size: 300;
    color: var(--lightGrey);
}

body div.favouritesPage header {
    padding-top: 7vh;
    width: 90%;
    margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html >
    <head>
    <meta charset="UTF-8">
        <title>Personal Website of Pete</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://fonts.googleapis.com/css?family=Farsan|Indie+Flower|Oleo+Script:700|Petit+Formal+Script|Raleway|Yeseva+One" rel="stylesheet">
        <link rel="stylesheet" href="css/custom.css">
        <script src="https://use.fontawesome.com/71da83f6b4.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script type="text/javascript" src="./js/custom.js"></script>
    </head>

<body>
    <!--  Start Navigation Section -->
    <nav>
        <span class="branding">
            <i class="fa fa-hand-peace-o" aria-hidden="true"></i>
            <div>Pete Smyth</div>
        </span>
        <div class="navLinks">
            <div class="dropdown">
                <button class="dropbtn">Interests&nbsp<i class="fa fa-caret-down" aria-hidden="true"></i>
                </button>
                <div class="dropdown-content">
                    <a class="scroll" href="#bk-photography">Photography</a>
                    <a class="scroll" href="#bk-favourites">Favourites</a>
                </div>
            </div>
            <div class="dropdown">
                <button class="dropbtn">Resume&nbsp<i class="fa fa-caret-down" aria-hidden="true"></i>
                </button>
                <div class="dropdown-content">
                    <a class="scroll" href="#bk-resume-experience">Experience</a>
                    <a class="scroll" href="#bk-resume-skills">Skills</a>
                    <a class="scroll" href="#bk-resume-portfolio">Portfolio</a>
                </div>
            </div>
            <a class="scroll nav-active" href="#bk-splash">Home</a>
            <a class="scroll" href="#bk-about">About</a>

        </div>          
    </nav>
    <!--  End Navigation Section -->

    <!--  Start Splashscreen Section -->
    <div id="bk-splash" class="splashScreen">
        <div  class="splashText">
            <h1>
                Pete Smyth
            </h1>
            <a href="#bk-about"><button>Learn More</button></a>
        </div>
        <!-- end of splashText class -->
    </div>
    <!--  End Splashscreen Section -->

    <!--  Start About Section -->
    <div id="bk-about" class="aboutPage">
        <header>
            <h1>Here's the Goss</h1>
        </header>

    </div>
    <!--  End About Section -->

    <!--  Start Resume Experience Section -->
    <div id="bk-resume-experience" class="experiencePage">
        <header>
            <h1>Pete's Experiences</h1>
        </header>

    </div>
    <!--  End Resume Experience Section -->

    <!--  Start Resume Skills Section -->
    <div id="bk-resume-skills" class="skillsPage">
        <header>
            <h1>Pete's Skills</h1>
        </header>

    </div>
    <!--  End Resume Skills Section -->

    <!--  Start Portfolio Section -->
    <div id="bk-resume-portfolio" class="portfolioPage">
        <header>
            <h1>Pete's Portfolio</h1>
        </header>

    </div>
    <!--  End Portfolio Section -->

    <!--  Start Photography Section -->
    <div id="bk-photography" class="photographyPage">
        <header>
            <h1>Pete's Photography</h1>
        </header>

    </div>
    <!--  End Photography Section -->

    <!--  Start Favourites Section -->
    <div id="bk-favourites" class="favouritesPage">
        <header>
            <h1>Pete's Favourites</h1>
        </header>

    </div>
    <!--  End Favourites Section -->
</body>

Answer 3

我认为您希望.dropbtn突出显示其下的.scroll时...

可能有几种方法可以做到这一点。 但是由于section（div）有固定的偏移量，你可以在加载时将它们全部放入数组中......然后将它们与滚动位置进行比较。

当我们有一个“匹配”时，从另一个包含id的数组中获取id并立即退出该循环。

这是脚本：

$(document).ready(function() {

  var scrollLink = $('.scroll');
  var dropbtn = $(".dropbtn");

  // Smooth scrolling
  scrollLink.click(function(e) {
    e.preventDefault();
    $('body,html').animate({
      scrollTop: $(this.hash).offset().top
    }, 1000 );
  });

  // Get all section position and id
  var sectionArr = [];
  var sectionId = [];
  $("body>div").each(function(){
    console.log($(this).attr("id") + " " + $(this).offset().top);
    sectionArr.push($(this).offset().top-20);
    sectionId.push($(this).attr("id"));
  });

  // Add the full page height to the array for the comparison of the last section
  sectionArr.push($("body").height());

  // Active link switching
  $(window).scroll(function() {
    var scrollbarLocation = $(this).scrollTop();

    // Remove the class everywhere
    scrollLink.removeClass('nav-active');
    dropbtn.removeClass('nav-active');

    // Compare the scrolled position with the offsets stored in array until we find.
    for(i=0;i<sectionArr.length;i++){
      var target = $(".scroll[href='#"+sectionId[i]+"']");

      // if the scrolled position is more than a section position, BUT less than the next
      if(scrollbarLocation>sectionArr[i] && scrollbarLocation<sectionArr[i+1]){
        // add the highlight class
        target.addClass("nav-active");
        if(target.parent().is(".dropdown-content")){
          // add the highlight class to the dropdown button
          target.closest(".dropdown").find(".dropbtn").addClass('nav-active');
        }
        break;  // Exit the loop on match
      }
    } // End for loop

  }); // End on scroll

}); // End ready

CodePen

注意您可以调整“触发点”，以便在显示超过一半的部分时发生菜单突出显示，我认为这样会更好！

只需更新此行：

sectionArr.push($(this).offset().top-20 - ($(this).height()/2));