Question

我试图向下滚动时在标题上添加效果。基本上，我想在滚动时更改标题的颜色。我做了一个小的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)");
});

Answer 1

向标头类添加以下内容： 过渡：所有.2s缓解；

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

您可以将 all 更改为 background 以与您的样式完美匹配。

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

1 个答案: