有没有办法在进入特定的全屏部分时更改标题背景？-前端黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

黑洞官方问答小能手

489336

文章

250650551

访问

+关注

分类

暂无分类

日期归档

暂无数据

有没有办法在进入特定的全屏部分时更改标题背景？

发布于2024-11-03 21:54 阅读(860) 评论(0) 点赞(21) 收藏(3)

我搜索了好久，但一直没找到在进入特定全屏部分时更改标题背景的方法。我找到了针对具有特定高度的 div 的 jquery 解决方案，但我不知道如何将其应用于高度：100vh 和宽度：100vw 的元素。

这可能吗？

section {
        height:100vh;
        width:100vw;
    }
    #section-one {
        background-color:white;
    }
    #section-two {
        background-color:green;
    }
    #section-three {
        background-color:blue;
    }
    #section-four {
        background-color:orange;
    }
    header {
        background-color: purple;
        color: white;
        height: 30px;
        position:fixed;
        width:100%;
        top:0;
        z-index:1;
    }
    ul {
      padding: 0;
      margin: 0;
    }
    ul li{
      display: inline-block;
      padding: 5px;
    }

<header>
  <ul>
    <li><a href="#section-one">One</a></li>
    <li><a href="#section-two">Two</a></li>
    <li><a href="#section-three">Three</a></li>
    <li><a href="#section-four">Four</a></li>
  </ul>
</header>
<section id="section-one"></section>
<section id="section-two"></section>
<section id="section-three"></section>
<section id="section-four"></section>

Expand snippet

解决方案

这可以是使用纯 javascript 和滚动事件处理程序的实现，对当前 html 结构进行最小的更改。这还支持单击锚链接。

let activeHeader = null;

function setCurrentSection() {
  const sections = document.getElementsByTagName("section");
  const scrollPosition = document.documentElement.scrollTop;
  for(let i = 0; i < sections.length; i++) {
    const section = sections[i];
    const scrollDifference = section.offsetTop - scrollPosition;
    if(scrollDifference >= 0 && scrollDifference <= 30) {
      const headerSection = document.querySelector(`[data-id='${section.id}']`);

      if(headerSection !== activeHeader) {
        if(activeHeader) activeHeader.style.backgroundColor = "inherit";
        const sectionStyles = window.getComputedStyle(section);
        headerSection.style.backgroundColor = sectionStyles.backgroundColor;
        activeHeader = headerSection;
      }
    }
  }
}

setCurrentSection();

window.addEventListener("scroll", function () {
    setCurrentSection();   
}, false);

section {
        height:100vh;
        width:100vw;
    }
    #section-one {
        background-color:white;
    }
    #section-two {
        background-color:green;
    }
    #section-three {
        background-color:blue;
    }
    #section-four {
        background-color:orange;
    }
    header {
        background-color: purple;
        color: white;
        height: 30px;
        position:fixed;
        width:100%;
        top:0;
        z-index:1;
    }
    ul {
      padding: 0;
      margin: 0;
    }
    ul li{
      display: inline-block;
      padding: 5px;
    }

<header>
  <ul>
    <li><a data-id="section-one" href="#section-one">One</a></li>
    <li><a data-id="section-two" href="#section-two">Two</a></li>
    <li><a data-id="section-three" href="#section-three">Three</a></li>
    <li><a data-id="section-four" href="#section-four">Four</a></li>
  </ul>
</header>
<section id="section-one"></section>
<section id="section-two"></section>
<section id="section-three"></section>
<section id="section-four"></section>