使用 JavaScript 条件向 HTML 部分添加更改

如何解决使用 JavaScript 条件向 HTML 部分添加更改

我有一个单部分网站，在向下滚动（隐藏上一部分）时会显示部分（关于、服务等）。我如何使用 JavaScript 代码在显示每个部分时添加 CSS 更改（更改如：显示/隐藏某个徽标、更改主菜单中该部分活动文本的颜色、更改导航菜单的颜色等？我的意思是：如果这个部分被选中（使用菜单或导航栏）/滚动到（鼠标滚动），那么做 CSS 更改有什么帮助吗？

类似网站：https://bratsun.com/#hello

解决方法

如果元素在视口中，您可以观看这些元素。这可能会有所帮助：How can I tell if a DOM element is visible in the current viewport?

如果元素在视口中，则向相应的导航项添加一个类（例如“活动”）

一个演示 Web 视图，可在标题菜单后向下和向上滚动。该页面没有响应，但您可以将其作为示例来设置更好的页面。

如您所见，function goToSectionPage 负责执行事件以滚动到愿望部分。

另外，你可以优化js代码中function addEventHandlerToHeaderButton的重复。

function goToSectionPage(sectionElement) {
  sectionElement.scrollIntoView({ behavior: "smooth",block: "center" });
}

function addEventHandlerToHeaderButton(buttonId,sectionId) {
  const buttonTarget = document.getElementById(buttonId);

  buttonTarget.addEventListener("click",function () {
    const parentSectionElement = document.querySelector("main");
    const targetSection = document.getElementById(sectionId);

    goToSectionPage(targetSection);
    addCssClassToSelecedtSession(parentSectionElement,targetSection,"selected");    
  });
}

function addCssClassToSelecedtSession(parentWrapSectionElements,selectedSectionElement,className) {
  for(let section of parentWrapSectionElements.children){
    section.classList.remove(className)
  }
  selectedSectionElement.classList.add(className)
}

addEventHandlerToHeaderButton("headerSection1","section1");
addEventHandlerToHeaderButton("headerSection2","section2");
addEventHandlerToHeaderButton("headerSection3","section3");
addEventHandlerToHeaderButton("headerSection4","section4");
addEventHandlerToHeaderButton("headerSection5","section5");
addEventHandlerToHeaderButton("headerSection6","section6");
addEventHandlerToHeaderButton("headerSection7","section7");
addEventHandlerToHeaderButton("headerAbout","about");

.section {
    display: block;
    height: 50px;
    border: 1px solid black;
    border-radius: 5px;
    margin-bottom: 10px;
    padding: 5px;
}

.header-item {
    cursor: pointer;
    padding: 0 8px;
    font-family: system-ui;
    font-size: 10px;
    color: #00000080;
}

.header-item:hover {
    border-bottom: 1px solid black;
}

header {
    width: 100%;
    position: fixed;
}

main {
    padding-top: 45px;
}

.selected {
    animation: sectionSelected 2s forwards;
}

@keyframes sectionSelected {
    from {
        background-color: #fff;
    }
    to {
        background-color: #c4c4c4;
    }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Test</title>
    <link rel="stylesheet" href="./stackoverflow.css">
  </head>

  <body>
    <header>
      <span id="headerSection1" class="header-item">Go to Section 1</span>
      <span id="headerSection2" class="header-item">Go to Section 2</span>
      <span id="headerSection3" class="header-item">Go to Section 3</span>
      <span id="headerSection4" class="header-item">Go to Section 4</span>
      <span id="headerSection5" class="header-item">Go to Section 5</span>
      <span id="headerSection6" class="header-item">Go to Section 6</span>
      <span id="headerSection7" class="header-item">Go to Section 7</span>
      <span id="headerAbout" class="header-item">Go to About</span>
    </header>

    <main>
      <section id="section1" class="section">Section1</section>
      <section id="section2" class="section">Section2</section>
      <section id="section3" class="section">Section3</section>
      <section id="section4" class="section">Section4</section>
      <section id="section5" class="section">Section5</section>
      <section id="section6" class="section">Section6</section>
      <section id="section7" class="section">Section7</section>
      <section id="about" class="section">About</section>
    </main>
  </body>
  <script src="./stackoverflow.js"></script>
</html>

https://github.com/stembrino/simple-page-example-scroll-down-up

您正在寻找 IntersectionObserver API。

这是一个 educational youtube video on IntersectionObserver V1。

对于某些极端情况，IntersectionObserver V2 已在 Chrome 中指定和实现。