滚动后导航到链接时如何不突出显示每个链接？

Question

我有这些链接在滚动时工作得很好。我的问题是，如果我单击单个链接（例如：博客），只想直接转到该链接，而不必前往每个链接以使其成为“博客”链接。有人可以指出我正确的方向或告诉我我错过了什么吗？提前非常感谢！

这里是LIVE DEMO

window.addEventListener('scroll', event => {
  let navigationLinks = document.querySelectorAll('nav ul li a');
  let fromTop = window.scrollY;

  navigationLinks.forEach(link => {
    let section = document.querySelector(link.hash);

    if (
      section.offsetTop <= fromTop &&
      section.offsetTop + section.offsetHeight > fromTop
    ) {
      link.classList.add('active');
    } else {
      link.classList.remove('active');
    }
  });
});

注意：我仍然希望保持流畅的滚动功能。

Answer 1

您可以通过链接手动禁用滚动间谍，然后通过超时启用它。

let disableScrollControl = false;
let oldTimeoutId;

document.querySelectorAll('.nav-link').forEach(link => {
  link.addEventListener('click', () => {
    disableScrollControl = true;
    document.querySelectorAll('nav ul li a').forEach(otherLink => {
      otherLink.classList.remove('active');
    });
    link.classList.add('active');
    
    if (oldTimeoutId) {
      clearTimeout(oldTimeoutId);
    }
    oldTimeoutId = setTimeout(() => {
      disableScrollControl = false;
      oldTimeoutId = undefined;
    }, 1000);
  });
});

//Active navigation on scroll
window.addEventListener('scroll', event => {
  if (disableScrollControl) {
    return;
  }
  let navigationLinks = document.querySelectorAll('nav ul li a');
  let fromTop = window.scrollY;
 
  navigationLinks.forEach(link => {
    let section = document.querySelector(link.hash);
   
    if (
      section.offsetTop <= fromTop &&
      section.offsetTop + section.offsetHeight > fromTop
    ) {
      link.classList.add('active');
    } else {
      link.classList.remove('active');
    }
  });
});

body {
    margin: 0;
    padding: 0;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    background: whitesmoke;
    display: grid;
    justify-items: center;
    align-items: center;
    overflow-x: hidden;
    margin-top: 44px;
    scroll-padding-top: 44px;
}
html {
    scroll-behavior: smooth;
}
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
#main {
    position: relative;
    width: 1280px;
    background: #fff;
}

/** Header **/
header {
    position: fixed;
    position: -webkit-fixed;
    top: 0;
    width: 1280px;
    background: #fff;
    z-index: 1000;
    border-bottom: 1px solid darkturquoise;
}

/** Navigation **/
.nav-container {
    width: 1280px;
    margin: auto;
    padding: 10px 0;
}
.nav-checkbox {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
}
.nav-logo {
    text-decoration: none;
    color: darkturquoise;
    display: grid;
    justify-self: start;
    margin-left: 20px;
    padding: 2px;
    font-weight: 600;
}
.nav-logo:hover {
    color: #000;
}
.tab-nav {
    display: none;
}
.tab-nav-label {
    color: #000;
    display: none;
}
.tab-content {
    list-style: none;
    justify-self: end;
    margin: 0;
    padding: 0;
}
.tab-content li {
    display: inline-block;
    margin-right: 20px;
}
.tab-content li a {
    text-decoration: none;
    color: #000;
    font-weight: 600;
}

/** style on scroll **/
.nav-container.scroll {
    background: darkturquoise;
}
.nav-container.scroll a {
    color: #fff;
}

/** active navigation **/
.nav-container.scroll a.active {
    color: #000;
    border-bottom: 2px solid #000;
}
.nav-container a.active {
    color: darkturquoise;
    border-bottom: 2px solid darkturquoise;
}

/** section **/
section {
    padding: 20px;
    text-align: center;
}
section h1 {
    padding: 20px;
}

/** footer **/
footer {
    min-height: 600px;
    background: darkturquoise;
    text-align: center;
}

/** media screen **/
@media screen and (max-width: 1280px) {
    #main {
        width: 100%;
    }
    header {
        width: 100%;
    }
    .nav-container {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .tab-content {
        display: grid;
        grid-template-columns: 1fr;
        grid-column: 1/4;
        text-align: center;
        max-height: 0;
        overflow: hidden;
        justify-self: center;
        transition: all ease-in-out 0.4s;
        -o-transition: all ease-in-out 0.4s;
        -webkit-transition: all ease-in-out 0.4s;
    }
    .tab-nav-label {
        display: grid;
        cursor: pointer;
        grid-column: 3;
        padding-right: 20px;
    }
    .nav-checkbox input:checked ~ .tab-content {
        max-height: 400px;
    }
    .tab-content li {
        padding: 10px 0;
        margin-right: 0px;
    }
    .nav-checkbox input:checked ~ .tab-nav-label {
        color: #000;
    }
}



.myvideo {
  text-decoration: none;
  color: #fff;
  background: red;
  text-align: center;
  padding: 10px;
  font-weight: 600;
  z-index:100;
  position: absolute;
  bottom: 0px;
}
.myvideo:hover {
  color: #000;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript-Change Navigation Style On Scroll | Active Navigation On Scroll</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
<main id="main"> 
  
   <!-- Header -->  
   <!-- Navigation -->
   <header>
    <div class="nav-container">
        <nav class="nav-checkbox">
            <a href="#" class="nav-logo">LOGO</a>
            <input type="checkbox" id="tab-nav" class="tab-nav">
            <label for="tab-nav" class="tab-nav-label">Menu</label>
            <ul class="tab-content">
                <li><a class="nav-link active" href="#home">Home</a></li>
                <li><a class="nav-link" href="#services">Services</a></li>
                <li><a class="nav-link" href="#about-us">About Us</a></li>
                <li><a class="nav-link" href="#blog">Blog</a></li>
                <li><a class="nav-link" href="#contact-us">Contact Us</a></li>
            </ul>
        </nav>
    </div>
  </header>  
     
      <!-- section -->
      <section id="home">
        <h1>Home</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A repellendus soluta rerum obcaecati provident autem assumenda, saepe possimus exercitationem pariatur? Perferendis quae ab molestias nostrum voluptatibus ex, dignissimos dolore sit impedit at porro aliquam, sequi facere dicta voluptate veritatis ipsum fuga quas qui excepturi! Explicabo laudantium possimus, suscipit vitae animi cumque totam nihil sequi ipsam. Distinctio beatae ipsa adipisci amet, odio maxime. Tempore assumenda ipsam non, impedit culpa laboriosam aliquid harum adipisci, necessitatibus eum, id facilis natus aperiam doloribus illum iure. Molestiae a aperiam nobis. Accusamus iusto voluptatum sapiente veritatis sed obcaecati perspiciatis consequatur, corporis, earum vitae explicabo tenetur voluptate voluptas magnam incidunt quam est perferendis harum inventore cumque? Iusto corrupti vel, necessitatibus! Nisi accusamus deleniti beatae culpa exercitationem. Quisquam itaque, cum eligendi impedit non fugit assumenda corrupti molestias nobis. Eveniet tempora suscipit molestias quibusdam amet modi deserunt culpa maxime est, consequuntur eligendi fugit debitis porro, iusto quas sunt nostrum molestiae veniam. Iure dignissimos odio sunt adipisci voluptatem architecto dolor, eveniet. Cupiditate repellendus hic quo recusandae quisquam, illum vel provident sapiente sequi. Nisi perferendis harum fugiat quas repudiandae magnam itaque. Minus quas voluptatum quia vero ad, suscipit tempore consequatur eius ipsum blanditiis voluptate maxime iste ab, veniam amet repudiandae ducimus reprehenderit voluptatibus, dolorem non. Recusandae obcaecati vitae tenetur aliquid excepturi, fugit numquam blanditiis! Fuga autem, maxime repudiandae dolorum obcaecati minima iste magni sequi voluptatibus, pariatur, officiis aperiam ad aut, sunt non alias laborum ea dolore. A autem cupiditate illum ducimus facilis doloribus laborum quos inventore non magni laudantium, maiores nam odio commodi ratione itaque accusantium harum, nihil, ipsam cum provident ipsa. Magni hic cupiditate reiciendis unde consequuntur soluta tempora debitis ab facere. Voluptatum aliquam praesentium itaque vitae modi maxime tenetur nam, doloremque doloribus repellendus esse in, aut eveniet, officia iure. Totam expedita veritatis blanditiis quos quasi sed, vitae rerum corrupti.</p>
      </section>
      <section id="services">
        <h1>Services</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium debitis non necessitatibus, reiciendis saepe beatae soluta voluptatem sequi velit repudiandae earum aperiam enim animi voluptates esse, at dolorum quas quia. Neque hic, est ullam aliquam nemo aliquid, perspiciatis blanditiis culpa iste nam, pariatur optio vitae doloribus. Iusto architecto molestiae dicta. Doloribus eaque vel itaque, sed est voluptatem obcaecati delectus. Vitae amet nihil, neque magni eveniet nobis magnam, sequi aliquid reprehenderit eos unde veritatis provident praesentium quisquam eum esse nisi adipisci doloremque dolore saepe ab, iure voluptatum nesciunt nam. Nihil eveniet atque impedit repellat laborum ratione, maxime natus, magni expedita voluptates architecto. Quibusdam delectus sunt, maxime qui distinctio, possimus neque voluptatem quos in animi autem soluta quaerat, odio iste mollitia quasi modi itaque totam est libero. Nemo dicta libero officiis corporis, necessitatibus harum nobis ullam deleniti laboriosam omnis quo facilis. Minus corporis pariatur ea debitis doloremque voluptate animi officia ipsam numquam, nihil odit a repellat nam necessitatibus distinctio, excepturi, fugiat. Sint rem explicabo hic iste dignissimos autem molestias id earum ipsam cum veritatis, saepe! Dolore aliquid perspiciatis omnis quia labore, delectus nobis iste sit iusto cum iure quo, minima deserunt. Quisquam facere velit quas impedit iure, officiis ut repudiandae nesciunt obcaecati, aspernatur soluta molestias culpa quae quasi, sequi animi praesentium repellendus! Repellat velit impedit temporibus voluptas quia minus, corporis officiis. Vitae necessitatibus nobis voluptates explicabo molestias! Neque nisi quo aperiam quia, dicta id repellendus possimus voluptates autem ratione laborum temporibus enim facere laudantium nobis adipisci tenetur illo cupiditate quas molestiae a perferendis inventore fuga. Autem repellat doloribus, provident eveniet laboriosam aut velit facere! Illum eaque doloremque, dignissimos voluptas consequuntur laboriosam accusantium, saepe id optio, ad inventore magnam voluptates repellendus. Dolor nulla amet odio assumenda ab incidunt expedita sed pariatur aspernatur. Illo ipsa nulla laboriosam ut natus architecto quasi cum consequatur voluptas.</p>
      </section>
      <section id="about-us">
        <h1>About Us</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, odio, doloremque, sunt tempore veniam nam maiores porro suscipit dolorem reprehenderit sint sapiente. Earum voluptatibus nulla esse nisi quos a eaque voluptatum facere ipsam autem consequatur repudiandae impedit hic blanditiis sint modi magni cupiditate dicta, vero fuga praesentium, cumque soluta iure. Atque nulla facilis sunt? Esse nam sunt, perferendis iure maiores officiis dolore, vel hic suscipit iste nobis voluptatum, amet, impedit magnam temporibus velit neque deleniti nulla voluptatibus! Dolorum, similique, error. Reprehenderit tenetur magnam perspiciatis velit nobis ab quisquam sequi porro autem, ad maiores quod, sed a architecto cupiditate, perferendis eos mollitia, minima dolores molestiae! Numquam officia animi delectus enim, laboriosam dolor veniam tempora consequuntur aliquid sit officiis aut molestiae dolorum perferendis esse reprehenderit vel nostrum iure, magni, eaque, adipisci voluptas impedit. Blanditiis laboriosam iste molestias quidem expedita et ipsa porro sed autem cumque quasi fugiat, doloribus sint repellendus laborum, placeat nihil dignissimos dolorem laudantium, dolorum architecto vel ratione reiciendis? Dolore facilis laborum magnam laboriosam at quisquam cumque ab, quibusdam ipsum tempore doloribus rem voluptatibus, sequi animi excepturi officiis adipisci consequatur odio! Architecto expedita eos ad veniam sapiente asperiores esse aliquid nobis, molestiae natus aut eius, quia vitae rerum incidunt dolores eligendi odit magni vel tenetur voluptatum alias consequatur. Culpa rerum architecto omnis hic ullam ex ipsam at fugiat aliquam, itaque sed, in ratione aperiam tempora officiis eaque a optio! Beatae cum sequi sunt obcaecati nostrum, in harum dolorem corporis eveniet tenetur quasi atque quis earum accusantium deserunt illo veritatis quibusdam. Obcaecati ipsam nam velit consequatur, commodi magnam quaerat harum iusto deserunt voluptatum cumque nesciunt veritatis perferendis amet vel aut nemo quod, qui! Dolores nesciunt animi veniam maxime. Id sint nihil vel ab molestias consectetur odit, aperiam repellat autem quibusdam odio quod, nulla commodi necessitatibus at dolor! Molestiae ratione, unde eius.</p>
      </section>
      <section id="blog">
        <h1>Blog</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet neque veritatis, enim iusto sequi impedit esse delectus totam eveniet, ratione explicabo tempora soluta consequuntur sint molestias quibusdam aperiam repudiandae pariatur! Dicta nobis voluptas iusto, maiores itaque. Labore consequuntur adipisci excepturi libero nostrum fuga debitis, animi soluta, repudiandae rem magni tempore possimus maiores perferendis laboriosam sapiente. Ducimus quia eaque, est, voluptates unde sequi nisi cum earum sint? Porro rem aperiam alias error, explicabo tempore facere praesentium sit voluptas esse, odio qui sed at! Ex cumque sint voluptatem labore facilis consectetur possimus odit quos quasi. Accusantium eum fugit cum labore reiciendis, repellat blanditiis nihil animi. Laborum illo neque reiciendis officia minima, deserunt eum animi officiis hic doloribus, impedit laudantium culpa soluta assumenda tempora est adipisci magni ea nemo? Porro sequi minima cumque modi reiciendis dolorum sit quibusdam dolorem aperiam illum temporibus, impedit ea quis error odio nobis vitae blanditiis ab perspiciatis esse fugit sed rem adipisci! Ab obcaecati voluptatum consequuntur deserunt debitis unde nam quasi accusamus iure ipsum architecto aspernatur rem iusto aut, sint illo sapiente suscipit explicabo deleniti! Atque placeat, iste veritatis at tempore ex vero quo quia repellendus ab suscipit nisi temporibus magni, porro quisquam. Quaerat, iure quidem voluptas voluptate id aliquam aut nesciunt pariatur, facilis quod repudiandae. Doloremque mollitia ipsa nostrum officia sit quasi quas debitis ab, ipsam architecto dolorem tempore accusantium, quis earum sed recusandae veniam unde provident. Totam, numquam placeat incidunt. Consectetur odio praesentium, eum ratione facilis, error eius ipsum cupiditate asperiores a doloremque voluptate laboriosam inventore in voluptas explicabo rem! Repellendus maiores dolorem ullam totam animi quaerat beatae voluptatum laborum ea aspernatur tempora cupiditate hic iusto ducimus, non nihil dolorum modi veritatis magni possimus eos necessitatibus aut dolores soluta. Magnam asperiores minus, enim consectetur sequi, explicabo nulla, cupiditate possimus quia dolore necessitatibus ipsum. Iste, repellat, dicta.</p>
      </section>
      <section id="contact-us">
        <h1>Contact Us</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus labore non laudantium voluptates deserunt eveniet consequatur perferendis nostrum! Perspiciatis porro sequi laboriosam hic exercitationem similique id mollitia architecto officiis nesciunt. Consequatur laudantium, veniam, cum pariatur exercitationem et ratione qui voluptate sequi, quis autem laboriosam reiciendis. Aut quam, quo, culpa dolor dolores libero est mollitia optio dolore unde esse! Id earum quod, libero provident illum distinctio, quasi, aliquam, excepturi dolore saepe voluptas adipisci est dolor! Delectus, et, assumenda! Quasi accusantium harum, sapiente possimus nobis facilis! Rerum vel dolor, nemo earum fugit commodi beatae, quidem explicabo magni dignissimos veniam, esse culpa. Culpa laudantium accusantium dolore, sed ad accusamus magni. Praesentium aut distinctio fugit sunt, inventore dicta necessitatibus, quae rerum debitis aperiam obcaecati dolore numquam! Cum ad, saepe eius accusamus enim ut fugit quas facere dicta voluptatum, magni! Quisquam et magni, quis facere, voluptatem assumenda similique ipsam, excepturi est enim, vitae ipsum aut expedita quasi deleniti rerum ab! Rerum illum sint assumenda vitae repellat temporibus repudiandae, optio error delectus. Blanditiis nemo ad labore, repellendus iste, dignissimos ut sit veniam enim voluptatibus voluptatem delectus. Saepe quas consequatur in labore sunt dicta nobis aperiam vel soluta temporibus delectus magni repudiandae, ullam sed voluptates, quae exercitationem obcaecati molestiae deleniti nulla quisquam itaque. Rem voluptates libero tempore illum sequi debitis ullam ut nihil eveniet suscipit, porro repudiandae quasi aut, ratione optio possimus incidunt beatae modi fugiat soluta aperiam! Unde porro dicta ipsam qui eaque saepe nam quod perferendis, numquam illo omnis optio enim expedita illum, maiores nulla veritatis commodi voluptatum quaerat labore suscipit hic natus ducimus? At porro dolorum accusantium dolor consectetur asperiores veniam molestiae fugiat, id, eaque minus neque inventore, quo culpa harum tempora praesentium quasi beatae accusamus odio qui repellat ut! Ipsam explicabo saepe recusandae natus cumque nihil quia, aperiam odit, amet nostrum, quasi harum.</p>
      </section>
      
      <!-- footer -->
      <footer>
          <h1>Footer</h1>
      </footer>
  </main> 
                <a href="https://www.youtube.com/watch?v=MXlAkBzKbpc&feature=youtu.be" class="myvideo"    target="_blank">Click Here To View My Video On YouTube</a>   
  <script src="index.js"></script>
</body>
</html>

Answer 2

我们可以在点击链接时设置某种标记，并稍微改变滚动时的行为，这样如果设置了该标记，中间链接就不会被突出显示。

更改 li 元素，以便它们在被点击的链接上也执行某些操作，因此列表变为：

    <ul class="tab-content">
        <li onclick="noHighlighting(this);"><a class="active" href="#home">Home</a></li>
        <li onclick="noHighlighting(this);"><a href="#services">Services</a></li>
        <li onclick="noHighlighting(this);"><a href="#about-us">About Us</a></li>
        <li onclick="noHighlighting(this);"><a href="#blog">Blog</a></li>
        <li onclick="noHighlighting(this);"><a href="#contact-us">Contact Us</a></li>
    </ul>

更改后的 JavaScript 为：

//On link click suppress intermediate highlighting
function noHighlighting(link) {
  document.querySelector('nav').classList.add('noHighlighting');
  link.firstChild.classList.add('linkSelected');
}
//Active navigation on scroll
window.addEventListener('scroll', event => {
  let navigationLinks = document.querySelectorAll('nav ul li a');
  let fromTop = window.scrollY;
  let show=!document.querySelector('nav').classList.contains('noHighlighting');//whether to show intermediary highlighting or not
  navigationLinks.forEach(link => {
    link.classList.remove('active');
    let section = document.querySelector(link.hash);
    let onScreen =                             
      section.offsetTop <= fromTop &&
      section.offsetTop + section.offsetHeight > fromTop;
    if ((onScreen && show) || link.classList.contains('linkSelected')) {
      link.classList.add('active');
      if (onScreen&&(link.classList.contains('linkSelected'))) {
        link.classList.remove('linkSelected');
        document.querySelector('nav').classList.remove('noHighlighting');
      }
    }
  });
});

你可以通过运行 sn-p 来查看它的工作情况（使用全页模式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript-Change Navigation Style On Scroll | Active Navigation On Scroll</title>
    <link rel="stylesheet" href="main.css">
<style>
    body {
    margin: 0;
    padding: 0;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    background: whitesmoke;
    display: grid;
    justify-items: center;
    align-items: center;
    overflow-x: hidden;
    margin-top: 44px;
    scroll-padding-top: 44px;
}
html {
    scroll-behavior: smooth;
}
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
#main {
    position: relative;
    width: 1280px;
    background: #fff;
}

/** Header **/
header {
    position: fixed;
    position: -webkit-fixed;
    top: 0;
    width: 1280px;
    background: #fff;
    z-index: 1000;
    border-bottom: 1px solid darkturquoise;
}

/** Navigation **/
.nav-container {
    width: 1280px;
    margin: auto;
    padding: 10px 0;
}
.nav-checkbox {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
}
.nav-logo {
    text-decoration: none;
    color: darkturquoise;
    display: grid;
    justify-self: start;
    margin-left: 20px;
    padding: 2px;
    font-weight: 600;
}
.nav-logo:hover {
    color: #000;
}
.tab-nav {
    display: none;
}
.tab-nav-label {
    color: #000;
    display: none;
}
.tab-content {
    list-style: none;
    justify-self: end;
    margin: 0;
    padding: 0;
}
.tab-content li {
    display: inline-block;
    margin-right: 20px;
}
.tab-content li a {
    text-decoration: none;
    color: #000;
    font-weight: 600;
}

/** style on scroll **/
.nav-container.scroll {
    background: darkturquoise;
}
.nav-container.scroll a {
    color: #fff;
}

/** active navigation **/
.nav-container.scroll a.active {
    color: #000;
    border-bottom: 2px solid #000;
}
.nav-container a.active {
    color: darkturquoise;
    border-bottom: 2px solid darkturquoise;
}

/** section **/
section {
    padding: 20px;
    text-align: center;
}
section h1 {
    padding: 20px;
}

/** footer **/
footer {
    min-height: 600px;
    background: darkturquoise;
    text-align: center;
}

/** media screen **/
@media screen and (max-width: 1280px) {
    #main {
        width: 100%;
    }
    header {
        width: 100%;
    }
    .nav-container {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .tab-content {
        display: grid;
        grid-template-columns: 1fr;
        grid-column: 1/4;
        text-align: center;
        max-height: 0;
        overflow: hidden;
        justify-self: center;
        transition: all ease-in-out 0.4s;
        -o-transition: all ease-in-out 0.4s;
        -webkit-transition: all ease-in-out 0.4s;
    }
    .tab-nav-label {
        display: grid;
        cursor: pointer;
        grid-column: 3;
        padding-right: 20px;
    }
    .nav-checkbox input:checked ~ .tab-content {
        max-height: 400px;
    }
    .tab-content li {
        padding: 10px 0;
        margin-right: 0px;
    }
    .nav-checkbox input:checked ~ .tab-nav-label {
        color: #000;
    }
}



.myvideo {
  text-decoration: none;
  color: #fff;
  background: red;
  text-align: center;
  padding: 10px;
  font-weight: 600;
  z-index:100;
  position: absolute;
  bottom: 0px;
}
.myvideo:hover {
  color: #000;
}
    </style>
</head>
<body>
<main id="main"> 
  
   <!-- Header -->  
   <!-- Navigation -->
   <header>
    <div class="nav-container">
        <nav class="nav-checkbox">
            <a href="#" class="nav-logo">LOGO</a>
            <input type="checkbox" id="tab-nav" class="tab-nav">
            <label for="tab-nav" class="tab-nav-label">Menu</label>
            <ul class="tab-content">
                <li onclick="noHighlighting(this);"><a class="active" href="#home">Home</a></li>
                <li onclick="noHighlighting(this);"><a href="#services">Services</a></li>
                <li onclick="noHighlighting(this);"><a href="#about-us">About Us</a></li>
                <li onclick="noHighlighting(this);"><a href="#blog">Blog</a></li>
                <li onclick="noHighlighting(this);"><a href="#contact-us">Contact Us</a></li>
            </ul>
        </nav>
    </div>
  </header>  
     
      <!-- section -->
      <section id="home">
        <h1>Home</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A repellendus soluta rerum obcaecati provident autem assumenda, saepe possimus exercitationem pariatur? Perferendis quae ab molestias nostrum voluptatibus ex, dignissimos dolore sit impedit at porro aliquam, sequi facere dicta voluptate veritatis ipsum fuga quas qui excepturi! Explicabo laudantium possimus, suscipit vitae animi cumque totam nihil sequi ipsam. Distinctio beatae ipsa adipisci amet, odio maxime. Tempore assumenda ipsam non, impedit culpa laboriosam aliquid harum adipisci, necessitatibus eum, id facilis natus aperiam doloribus illum iure. Molestiae a aperiam nobis. Accusamus iusto voluptatum sapiente veritatis sed obcaecati perspiciatis consequatur, corporis, earum vitae explicabo tenetur voluptate voluptas magnam incidunt quam est perferendis harum inventore cumque? Iusto corrupti vel, necessitatibus! Nisi accusamus deleniti beatae culpa exercitationem. Quisquam itaque, cum eligendi impedit non fugit assumenda corrupti molestias nobis. Eveniet tempora suscipit molestias quibusdam amet modi deserunt culpa maxime est, consequuntur eligendi fugit debitis porro, iusto quas sunt nostrum molestiae veniam. Iure dignissimos odio sunt adipisci voluptatem architecto dolor, eveniet. Cupiditate repellendus hic quo recusandae quisquam, illum vel provident sapiente sequi. Nisi perferendis harum fugiat quas repudiandae magnam itaque. Minus quas voluptatum quia vero ad, suscipit tempore consequatur eius ipsum blanditiis voluptate maxime iste ab, veniam amet repudiandae ducimus reprehenderit voluptatibus, dolorem non. Recusandae obcaecati vitae tenetur aliquid excepturi, fugit numquam blanditiis! Fuga autem, maxime repudiandae dolorum obcaecati minima iste magni sequi voluptatibus, pariatur, officiis aperiam ad aut, sunt non alias laborum ea dolore. A autem cupiditate illum ducimus facilis doloribus laborum quos inventore non magni laudantium, maiores nam odio commodi ratione itaque accusantium harum, nihil, ipsam cum provident ipsa. Magni hic cupiditate reiciendis unde consequuntur soluta tempora debitis ab facere. Voluptatum aliquam praesentium itaque vitae modi maxime tenetur nam, doloremque doloribus repellendus esse in, aut eveniet, officia iure. Totam expedita veritatis blanditiis quos quasi sed, vitae rerum corrupti.</p>
      </section>
      <section id="services">
        <h1>Services</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium debitis non necessitatibus, reiciendis saepe beatae soluta voluptatem sequi velit repudiandae earum aperiam enim animi voluptates esse, at dolorum quas quia. Neque hic, est ullam aliquam nemo aliquid, perspiciatis blanditiis culpa iste nam, pariatur optio vitae doloribus. Iusto architecto molestiae dicta. Doloribus eaque vel itaque, sed est voluptatem obcaecati delectus. Vitae amet nihil, neque magni eveniet nobis magnam, sequi aliquid reprehenderit eos unde veritatis provident praesentium quisquam eum esse nisi adipisci doloremque dolore saepe ab, iure voluptatum nesciunt nam. Nihil eveniet atque impedit repellat laborum ratione, maxime natus, magni expedita voluptates architecto. Quibusdam delectus sunt, maxime qui distinctio, possimus neque voluptatem quos in animi autem soluta quaerat, odio iste mollitia quasi modi itaque totam est libero. Nemo dicta libero officiis corporis, necessitatibus harum nobis ullam deleniti laboriosam omnis quo facilis. Minus corporis pariatur ea debitis doloremque voluptate animi officia ipsam numquam, nihil odit a repellat nam necessitatibus distinctio, excepturi, fugiat. Sint rem explicabo hic iste dignissimos autem molestias id earum ipsam cum veritatis, saepe! Dolore aliquid perspiciatis omnis quia labore, delectus nobis iste sit iusto cum iure quo, minima deserunt. Quisquam facere velit quas impedit iure, officiis ut repudiandae nesciunt obcaecati, aspernatur soluta molestias culpa quae quasi, sequi animi praesentium repellendus! Repellat velit impedit temporibus voluptas quia minus, corporis officiis. Vitae necessitatibus nobis voluptates explicabo molestias! Neque nisi quo aperiam quia, dicta id repellendus possimus voluptates autem ratione laborum temporibus enim facere laudantium nobis adipisci tenetur illo cupiditate quas molestiae a perferendis inventore fuga. Autem repellat doloribus, provident eveniet laboriosam aut velit facere! Illum eaque doloremque, dignissimos voluptas consequuntur laboriosam accusantium, saepe id optio, ad inventore magnam voluptates repellendus. Dolor nulla amet odio assumenda ab incidunt expedita sed pariatur aspernatur. Illo ipsa nulla laboriosam ut natus architecto quasi cum consequatur voluptas.</p>
      </section>
      <section id="about-us">
        <h1>About Us</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, odio, doloremque, sunt tempore veniam nam maiores porro suscipit dolorem reprehenderit sint sapiente. Earum voluptatibus nulla esse nisi quos a eaque voluptatum facere ipsam autem consequatur repudiandae impedit hic blanditiis sint modi magni cupiditate dicta, vero fuga praesentium, cumque soluta iure. Atque nulla facilis sunt? Esse nam sunt, perferendis iure maiores officiis dolore, vel hic suscipit iste nobis voluptatum, amet, impedit magnam temporibus velit neque deleniti nulla voluptatibus! Dolorum, similique, error. Reprehenderit tenetur magnam perspiciatis velit nobis ab quisquam sequi porro autem, ad maiores quod, sed a architecto cupiditate, perferendis eos mollitia, minima dolores molestiae! Numquam officia animi delectus enim, laboriosam dolor veniam tempora consequuntur aliquid sit officiis aut molestiae dolorum perferendis esse reprehenderit vel nostrum iure, magni, eaque, adipisci voluptas impedit. Blanditiis laboriosam iste molestias quidem expedita et ipsa porro sed autem cumque quasi fugiat, doloribus sint repellendus laborum, placeat nihil dignissimos dolorem laudantium, dolorum architecto vel ratione reiciendis? Dolore facilis laborum magnam laboriosam at quisquam cumque ab, quibusdam ipsum tempore doloribus rem voluptatibus, sequi animi excepturi officiis adipisci consequatur odio! Architecto expedita eos ad veniam sapiente asperiores esse aliquid nobis, molestiae natus aut eius, quia vitae rerum incidunt dolores eligendi odit magni vel tenetur voluptatum alias consequatur. Culpa rerum architecto omnis hic ullam ex ipsam at fugiat aliquam, itaque sed, in ratione aperiam tempora officiis eaque a optio! Beatae cum sequi sunt obcaecati nostrum, in harum dolorem corporis eveniet tenetur quasi atque quis earum accusantium deserunt illo veritatis quibusdam. Obcaecati ipsam nam velit consequatur, commodi magnam quaerat harum iusto deserunt voluptatum cumque nesciunt veritatis perferendis amet vel aut nemo quod, qui! Dolores nesciunt animi veniam maxime. Id sint nihil vel ab molestias consectetur odit, aperiam repellat autem quibusdam odio quod, nulla commodi necessitatibus at dolor! Molestiae ratione, unde eius.</p>
      </section>
      <section id="blog">
        <h1>Blog</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet neque veritatis, enim iusto sequi impedit esse delectus totam eveniet, ratione explicabo tempora soluta consequuntur sint molestias quibusdam aperiam repudiandae pariatur! Dicta nobis voluptas iusto, maiores itaque. Labore consequuntur adipisci excepturi libero nostrum fuga debitis, animi soluta, repudiandae rem magni tempore possimus maiores perferendis laboriosam sapiente. Ducimus quia eaque, est, voluptates unde sequi nisi cum earum sint? Porro rem aperiam alias error, explicabo tempore facere praesentium sit voluptas esse, odio qui sed at! Ex cumque sint voluptatem labore facilis consectetur possimus odit quos quasi. Accusantium eum fugit cum labore reiciendis, repellat blanditiis nihil animi. Laborum illo neque reiciendis officia minima, deserunt eum animi officiis hic doloribus, impedit laudantium culpa soluta assumenda tempora est adipisci magni ea nemo? Porro sequi minima cumque modi reiciendis dolorum sit quibusdam dolorem aperiam illum temporibus, impedit ea quis error odio nobis vitae blanditiis ab perspiciatis esse fugit sed rem adipisci! Ab obcaecati voluptatum consequuntur deserunt debitis unde nam quasi accusamus iure ipsum architecto aspernatur rem iusto aut, sint illo sapiente suscipit explicabo deleniti! Atque placeat, iste veritatis at tempore ex vero quo quia repellendus ab suscipit nisi temporibus magni, porro quisquam. Quaerat, iure quidem voluptas voluptate id aliquam aut nesciunt pariatur, facilis quod repudiandae. Doloremque mollitia ipsa nostrum officia sit quasi quas debitis ab, ipsam architecto dolorem tempore accusantium, quis earum sed recusandae veniam unde provident. Totam, numquam placeat incidunt. Consectetur odio praesentium, eum ratione facilis, error eius ipsum cupiditate asperiores a doloremque voluptate laboriosam inventore in voluptas explicabo rem! Repellendus maiores dolorem ullam totam animi quaerat beatae voluptatum laborum ea aspernatur tempora cupiditate hic iusto ducimus, non nihil dolorum modi veritatis magni possimus eos necessitatibus aut dolores soluta. Magnam asperiores minus, enim consectetur sequi, explicabo nulla, cupiditate possimus quia dolore necessitatibus ipsum. Iste, repellat, dicta.</p>
      </section>
      <section id="contact-us">
        <h1>Contact Us</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus labore non laudantium voluptates deserunt eveniet consequatur perferendis nostrum! Perspiciatis porro sequi laboriosam hic exercitationem similique id mollitia architecto officiis nesciunt. Consequatur laudantium, veniam, cum pariatur exercitationem et ratione qui voluptate sequi, quis autem laboriosam reiciendis. Aut quam, quo, culpa dolor dolores libero est mollitia optio dolore unde esse! Id earum quod, libero provident illum distinctio, quasi, aliquam, excepturi dolore saepe voluptas adipisci est dolor! Delectus, et, assumenda! Quasi accusantium harum, sapiente possimus nobis facilis! Rerum vel dolor, nemo earum fugit commodi beatae, quidem explicabo magni dignissimos veniam, esse culpa. Culpa laudantium accusantium dolore, sed ad accusamus magni. Praesentium aut distinctio fugit sunt, inventore dicta necessitatibus, quae rerum debitis aperiam obcaecati dolore numquam! Cum ad, saepe eius accusamus enim ut fugit quas facere dicta voluptatum, magni! Quisquam et magni, quis facere, voluptatem assumenda similique ipsam, excepturi est enim, vitae ipsum aut expedita quasi deleniti rerum ab! Rerum illum sint assumenda vitae repellat temporibus repudiandae, optio error delectus. Blanditiis nemo ad labore, repellendus iste, dignissimos ut sit veniam enim voluptatibus voluptatem delectus. Saepe quas consequatur in labore sunt dicta nobis aperiam vel soluta temporibus delectus magni repudiandae, ullam sed voluptates, quae exercitationem obcaecati molestiae deleniti nulla quisquam itaque. Rem voluptates libero tempore illum sequi debitis ullam ut nihil eveniet suscipit, porro repudiandae quasi aut, ratione optio possimus incidunt beatae modi fugiat soluta aperiam! Unde porro dicta ipsam qui eaque saepe nam quod perferendis, numquam illo omnis optio enim expedita illum, maiores nulla veritatis commodi voluptatum quaerat labore suscipit hic natus ducimus? At porro dolorum accusantium dolor consectetur asperiores veniam molestiae fugiat, id, eaque minus neque inventore, quo culpa harum tempora praesentium quasi beatae accusamus odio qui repellat ut! Ipsam explicabo saepe recusandae natus cumque nihil quia, aperiam odit, amet nostrum, quasi harum.</p>
      </section>
      
      <!-- footer -->
      <footer>
          <h1>Footer</h1>
      </footer>
  </main>
<script>
//On link click suppress intermediate highlighting
function noHighlighting(link) {
  document.querySelector('nav').classList.add('noHighlighting');
  link.firstChild.classList.add('linkSelected');
}
//Active navigation on scroll
window.addEventListener('scroll', event => {
  let navigationLinks = document.querySelectorAll('nav ul li a');
  let fromTop = window.scrollY;
  let show=!document.querySelector('nav').classList.contains('noHighlighting');//whether to show intermediary highlighting or not
  navigationLinks.forEach(link => {
    link.classList.remove('active');
    let section = document.querySelector(link.hash);
    let onScreen =                             
      section.offsetTop <= fromTop &&
      section.offsetTop + section.offsetHeight > fromTop;
    if ((onScreen && show) || link.classList.contains('linkSelected')) {
      link.classList.add('active');
      if (onScreen&&(link.classList.contains('linkSelected'))) {
        link.classList.remove('linkSelected');
        document.querySelector('nav').classList.remove('noHighlighting');
      }
    }
  });
});
</script>  
                <a href="https://www.youtube.com/watch?v=MXlAkBzKbpc&feature=youtu.be" class="myvideo"    target="_blank">Click Here To View My Video On YouTube</a>   
  <script src="index.js"></script>
</body>
</html>

Answer 3

首先，我认为目前的方法存在一些问题。

为了说明这一点，如果您在窗口的滚动事件处理程序中放置 console.log 语句：

/* ... */

let fromTop = window.scrollY;

console.log('scroll event');

navigationLinks.forEach(link => { /* ... */ })

/* ... */

然后单击Blog 链接，控制台将打印消息至少 20 次。考虑到每次调用处理程序都会运行navigationLinks.forEach 循环，我想说这不是最有效的方法。还有一个事实是，您在每次调用时也查询 DOM，不推荐这样做。

考虑到这一点，这是我的方法：

const linksContainer = document.querySelector(".tab-content");

let prevActiveLink = document.querySelector(".tab-content .active");

// attaching the listener only on the container
// with the help of event bubbling, this handler will be called
// `ev.target` - the element that started the event
// `ev.currentTarget` - the element to which the handler attached
linksContainer.addEventListener('click', ev => {
  
  // if we clicked on the container, no need to go further
  if (ev.target === ev.currentTarget) {
    return
  }
  
  console.log(ev)
   
  const currentLink = ev.target;
  
  if (currentLink === prevActiveLink) {
    return;
  }
 
  prevActiveLink && prevActiveLink.classList.remove('active');
  currentLink.classList.add('active')
  
  prevActiveLink = currentLink;
})

Demo.

---

编辑 - 使用debounce

const handler = event => {
  let navigationLinks = document.querySelectorAll('nav ul li a');
  let fromTop = window.scrollY;
 
  console.log('scroll event')
  
  navigationLinks.forEach(link => {
    /* ... */
  });
}

const debounce = (fn, time) => {
  let id;
  
  return ev => {
    id && clearTimeout(id);
    
    id = setTimeout(fn, time, ev)
  }
}

window.addEventListener('scroll', debounce(handler, 100));

Demo

Answer 4

您唯一需要做的就是添加一个去抖动功能，以便您的滚动事件处理程序“延迟”到未来。例如：

function debounce(func, wait, immediate) {
    var timeout;
    return function () {
        var context = this, args = arguments;
        var later = function () {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
}

//Active navigation on scroll
window.addEventListener('scroll', debounce(() => {
    // ... your existing logic for scroll event
}, 50));

附： debounce 函数实现取自here。 更新的笔是here