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

Question

目前，每当我单击导航菜单项时，它们就会突出显示，但我希望 HTML 中的整个部分都有突出显示的背景，因此当用户滚动浏览网站时，它会根据情况自动突出显示导航菜单项到他们滚动浏览的任何部分

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

这是我当前在 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 个部分，但这仅显示前两个部分。

这是我用来创建导航栏的 Javascript

const navMenu = document.querySelectorAll("section");
const navList = document.getElementById("navbar__list");
const items = ["Section 1", "Section 2", "Section 3", "Section 4"];

//Build the nav
items.forEach((item, i) => {
  const el = document.createElement("a");
  el.innerText = item;
  el.classList.add("menu-items");
  el.setAttribute("id", `menu-${i + 1}`);
  el.href = `#section${i + 1}`;
  navList.appendChild(el);

  const li = document.createElement("li");
  li.classList.add("menu-list");
  li.appendChild(el);
  li.setAttribute("id", `${i + 1}`);
  // Append the list item to the list
  navList.appendChild(li);
});

//Make Nav Active when Clicked and scrolls down to section
document.addEventListener("click", function (event) {
  let active = document.querySelector(".menu-list.active");
  if (active) active.classList.remove("active");
  if (event.target.classList.contains("menu-list")) {
    event.target.classList.add("active");
    window.location.href = "#section" + event.target.id;
  }
});

Answer 1

只需使用 mouseover和 mouseout事件!

这是一个小例子& here is a JS Fiddle as well :

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");
    });
  }
});

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;
}

<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>

编辑:This is the working fiddle使用您的代码