滚动时在标题上添加平滑过渡

Posted 2023-03-07

【中文标题】滚动时在标题上添加平滑过渡

【英文标题】：Add smooth transition on header when I scroll

【发布时间】：2020-03-29 10:42:48

【问题描述】：

当我向下滚动时，我正在尝试在标题上添加效果。基本上我想在滚动时更改标题的颜色。我做了一个小的 javascript 代码来做这个改变，但我也想在这个改变上添加一个平滑的过渡。谁能帮我？谢谢

这是我的代码和 codepen 的链接： https://codepen.io/paulo-frutuoso/pen/wvvREZg

<header>
  <nav>
  <ul>
  <li><a href="#">Menu</a></li>
  <li><a href="#">Menu</a></li>
  <li><a href="#">Menu</a></li>
  <li><a href="#">Menu</a></li>
  </ul>
</nav>
</header>

我的无耻

:root 
  --menuCor: #013220;
  --menuTransparente: rgba(1, 50, 32, 0.2);


* 
  margin: 0;
  padding: 0;


body 
  height: 200vh;
  background: url('https://lisboa.smartmove.pt:8083/Fluminense/DemoPortalTorcedor/images/banner_01.jpg') no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


header 
      background: var(--menuTransparente);
    position: fixed;
      width: 100%;
    height: 60px;
      z-index:2;

    nav 
      ul 
        display: flex;
        justify-content: space-around;
        align-items: center;
        list-style-type: none;
        height: 60px;

        li 
          a 
            text-decoration: none;
            color: #fff;
            font-family: 'Open sans';
            font-size: .8rem;
            
         
      
    
  

我的 JS

const htmlTag = document.querySelector('html');
const bodyTag = document.querySelector('body');
const myNav = document.querySelector('header');
const myElem = document.querySelector('header nav li a');

let scrolled = () => 
  let dec = scrollY / (bodyTag.scrollHeight - innerHeight);
  return Math.floor(dec *100);


addEventListener('scroll', () => 
  myNav.style.setProperty('background', scrolled() > 20 ? "var(--menuCor)" : "var(--menuTransparente)");
);

【参考方案1】：

添加到标题类： 过渡：所有 .2s 缓入；

header 
  background: var(--menuTransparente);
  position: fixed;
  width: 100%;
  height: 60px;
  z-index:2;
  transition: all .2s ease-in;

您可以将all改为background，以与您的风格完美匹配。

【讨论】：

当然。还有什么？我觉得自己很傻。非常感谢；）

不客气，只要点击我的答案是正确的：D