亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

每當我滾動瀏覽該部分時,突出顯示我的導航欄菜單項?僅使用 Javascript

每當我滾動瀏覽該部分時,突出顯示我的導航欄菜單項?僅使用 Javascript

小怪獸愛吃肉 2022-06-16 17:29:32
我目前在單擊導航菜單項時會突出顯示它們,但我希望 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 個部分,但這僅顯示前兩個部分。
查看完整描述

1 回答

?
倚天杖

TA貢獻1828條經驗 獲得超3個贊

只需利用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>


查看完整回答
反對 回復 2022-06-16
  • 1 回答
  • 0 關注
  • 105 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號