每当我滚动浏览该部分时，突出显示我的导航栏菜单项？仅使用 Javascript

只需利用mouseover和mouseout事件！这是一个小例子&这里也是一个 JS Fiddle：<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Test</title>    <style>      body {        font-family : "Arial", sans-serif;      }      #navbar__list {        height           : 40px;        background-color : #55443D;        display          : block;        align-content    : center;        align-items      : center;        position         : fixed;        top              : 0;        left             : 0;        width            : 100vw;        z-index          : 1;        margin           : 0 auto;      }      #navbar__list ul {        padding    : 0;        list-style : none;        position   : relative;        display    : table;        margin     : 0 auto;      }      #navbar__list li {        display : table-cell;      }      #navbar__list li a {        padding         : 10px 20px;        display         : block;        color           : white;        text-decoration : none;        transition      : all 0.3s ease-in-out;      }      #navbar__list li a:hover {        color : #dc5c26;      }      #navbar__list li a .active {        color         : #F38A8A;        border-bottom : 3px solid #F38A8A;      }      .active {        color         : #F38A8A;        border-bottom : 3px solid #F38A8A;      }      .sec {        height  : 50vh;        display : block;      }      .sec h2 {        position : relative;        top      : 50%;        left     : 50%;      }      #section1 {        background-color : green;      }      #section2 {        background-color : yellow;      }      #section3 {        background-color : blue;      }      #section4 {        background-color : grey;      }    </style>  </head>  <body>    <ul id="navbar__list"></ul>    <section class="container">      <div id="section1" class="sec">        <h2>Section 1</h2>      </div>      <div id="section2" class="sec">        <h2>Section 2</h2>      </div>      <div id="section3" class="sec">        <h2>Section 3</h2>      </div>      <div id="section4" class="sec">        <h2>Section 4</h2>      </div>    </section>  </body>  <script>    const navMenu = document.querySelectorAll( "section" );    const navList = document.getElementById( "navbar__list" );    const items = [ "Section 1", "Section 2", "Section 3", "Section 4" ];    let lastId;    let last_known_scroll_position = 0;    let ticking = false;    //Build the nav    items.forEach( ( item, i ) => {      const li = document.createElement( "li" );      const el = document.createElement( "a" );      el.innerText = item;      el.classList.add( "menu-items" );      el.setAttribute( "id", `menu-${i + 1}` );      el.href = `#section${i + 1}`;      el.addEventListener( "click", function ( e ) {        const href = e.target.getAttribute( "href" ),          offsetTop = href === "#" ? 0 : e.target.offsetTop - topMenuHeight + 1;        const scrollOptions = { scrollIntoView: true, behavior: "smooth" };        e.target.scrollIntoView( scrollOptions );        e.preventDefault();      } );      navList.appendChild( li );      li.appendChild( el );    } );    const topMenu = document.getElementById( "navbar__list" );    const topMenuHeight = topMenu.offsetHeight + 1;    const menuItems = document.querySelectorAll( ".menu-items" );    const scrollItems = document.querySelectorAll( ".sec" );    //Make Nav Active when Clicked and scrolls down to section    document.addEventListener( "click", function ( event ) {      let active = document.querySelector( ".active" );      if ( active ) {        active.classList.remove( "active" );      }      if ( event.target.classList.contains( "menu-items" ) ) {        event.target.classList.add( "active" );      }    } );    // Bind to scroll    window.addEventListener( "scroll", function () {      // Get container scroll position      const container = document.querySelector( ".container" );      let fromTop = window.pageYOffset + topMenuHeight + 40;      // Get id of current scroll item      let cur = [];      [ ...scrollItems ].map( function ( item ) {        if ( item.offsetTop < fromTop ) {          cur.push( item );        }      } );      // Get the id of the current element      cur = cur[ cur.length - 1 ];      let id = cur ? cur.id : "";      if ( lastId !== id ) {        lastId = id;        menuItems.forEach( function ( elem, index ) {          elem.classList.remove( "active" );          const filteredItems = [ ...menuItems ].filter( elem => elem.getAttribute( "href" ) === `#${id}` );          filteredItems[ 0 ].classList.add( "active" );        } );      }    } );  </script></html>

每当我滚动浏览该部分时，突出显示我的导航栏菜单项？仅使用 Javascript

1回答