输入特定的全屏部分时，是不是可以更改标题背景？

Posted 2023-02-23

【中文标题】输入特定的全屏部分时，是不是可以更改标题背景？

【英文标题】：Is there a way to change header background when entering a specific fullscreen section?输入特定的全屏部分时，是否可以更改标题背景？

【发布时间】：2019-01-10 19:06:37

【问题描述】：

在输入特定全屏部分时更改标题背景的方法后，我进行了搜索和搜索，但没有成功。 我找到了针对具有特定高度的 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>

【问题讨论】：

如果我理解正确，您想在滚动或单击标题的锚点时根据视口中的 div 修改标题的背景颜色？

没错！我很想知道是否也可以修改导航链接颜色。

查看这个演示：jsfiddle.net/gUWdJ/3，我相信它可以使用滚动事件侦听器解决您的问题。你总是可以使用纯 javascript，不需要 jQuery。

当您想要根据设备的一般类型（例如打印与屏幕）或特定特征和参数（例如屏幕分辨率或浏览器视口宽度）修改您的网站或应用程序时，媒体查询非常有用.

我不认为这里的问题是 css 和媒体样式的问题，而是容器滚动调整标题样式的问题。在这种情况下，媒体查询将无济于事......

【参考方案1】：

这可以是一个使用纯 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>