猿问

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

我目前在单击导航菜单项时会突出显示它们，但我希望 HTML 中的整个部分具有突出显示的背景，因此当用户滚动浏览网站时，它将根据哪个选项自动突出显示导航菜单项他们正在滚动浏览的部分


这是我试图用我的代码 https://codepen.io/joxmar/pen/NqqMEg实现的关于 codepen 的示例


这是我在 Jsfiddle https://jsfiddle.net/hzg02k3n/中的当前登录页面


正如您从我的 jsfiddle 中看到的那样，当我单击链接时，链接会突出显示，但每当我滚动该部分时，我需要它变为活动状态。


在我当前的 HTML 代码下方


<header class="page__header">

      <nav class="navbar__menu">

        <!-- Navigation starts as empty UL that will be populated with JS -->

        <ul id="navbar__list"></ul>

      </nav>

    </header>

    <main>

      <header class="main__hero">

        <h1>Landing Page</h1>

      </header>

<section id="section1" data-nav="Section 1" class="active">

        <div class="landing__container">

          <h2>Section 1</h2>

          <p>

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi

            fermentum metus faucibus lectus pharetra dapibus. Suspendisse

            potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget

            lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed

            convallis sollicit

          </p>


          <p>

            Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar

            gravida, ipsum l

          </p>

        </div>

      </section>

      <section id="section2" data-nav="Section 2">

        <div class="landing__container">

          <h2>Section 2</h2>

          <p>

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi

            fermentum metus faucibus lectus pharetra dapibus. Suspendisse

            potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget

            lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed

            convallis s

          </p>


          <p>

            Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar

            gravida, ipsum l

          </p>

        </div>

      </section>

我最多有 4 个部分，但这仅显示前两个部分。


小怪兽爱吃肉
浏览 90回答 1
1回答

倚天杖

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

相关分类

JavaScript
我要回答