使用 JavaScript 条件添加对 HTML 部分的更改答案

【问题标题】：Add changes to HTML sections using JavaScript condition使用 JavaScript 条件添加对 HTML 部分的更改
【发布时间】：2021-07-09 12:45:40
【问题描述】：

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

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

【问题讨论】：

标签： javascript html css sections

【解决方案1】：

一个演示 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

【讨论】：

非常感谢，这是关于滚动的，我的网站已经完成，滚动部分运行良好，但仍然存在样式问题。我想在选择某个部分（使用菜单）或滚动到时进行 CSS 更改，例如更改徽标、为菜单中的活动文本着色……
好的 @FadiKh 我更改了代码以便在该部分中应用一些样式。我们可以用 js 做到这一点。但是请注意，我们应用代码越多，我们必须组织的越多。在这种情况下，这只是一个示例，但可以应用于项目的某个单独部分。
我上传了一个测试，您可以在此处查看 zip 文件 github.com/MDwaihi/Test.git 我想要的是当您单击导航时完成，使用菜单栏或滚动图标切换部分，使用滚动切换时问题仍然存在，您可以查看是否检查
我会在 github 中创建没有 zip 的项目并添加你。所以我们可以一起对这个项目应用更改
您好，Fabio，最后一件事，您可以在 GitHub 中查看我更新的解决方案，我进行了一些更改并修复了我想要的所有内容。左侧导航菜单中还有一个问题（切换颜色），请检查一下。最后一期。

【解决方案2】：

您正在寻找IntersectionObserver API。

这是educational youtube video on IntersectionObserver V1。

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

【讨论】：

【解决方案3】：

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

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

【讨论】：