使用javascript滚动时更改标题颜色

Question

我已经尝试了一段时间寻找解决方案。

因此它开始透明，然后当我滚动一定长度时，它会变为具有背景颜色。下面的代码是我到目前为止的代码

CSS文件

header {
padding-top: 10px;
background-color: transparent;
color: white;
position: fixed;
width: 100%;
z-index: 1;
}

.changeColor {
background-color: rgba(30, 32, 35, 0.9);
} 

JS在HTML文件底部的脚本标签中

 var scroll_distance = 100;
 var transparent = true;
 document.addEventListener("scroll", function(){
    if($(document).scrollTop() > scroll_distance ) {
        if(transparent) {
            transparent = false;
            $('header').removeClass('changeColor');
        }
     } else {
        if( !transparent ) {
            transparent = true;
            $('header').addClass('changeColor');
        }
      }
  });

  window.addEventListener("scroll", function(){
    if($(document).scrollTop() > scroll_distance ) {
        if(transparent) {
            transparent = false;
            $('header').removeClass('changeColor');
        }
     } else {
        if( !transparent ) {
            transparent = true;
            $('header').addClass('changeColor');
        }
      }
  });

HTML文件

<header id="headernavbar">
              ...
</header>

关于如何做到这一点的任何提示？我尝试使用JQuery但结果相同。它根本不添加类。在访问该网站之前我还清除了cookie和缓存，并尝试了多个浏览器而没有运气。修复此问题后，我还要添加过渡效果。

Answer 1

你反其道而行之。没有错误，但逻辑错误。

• 默认情况下，您的背景已经透明。
• 你已经设置了从顶部滚动，删除该类甚至没有添加。

你需要修理什么？

当document_scrolltop > scroll_distance，你添加类，否则删除它。

var scroll_distance = 100;
var transparent = true;
document.addEventListener("scroll", function() {
  if ($(document).scrollTop() > scroll_distance) {
    if (transparent) {
      transparent = false;
      $('header').addClass('changeColor');
    }
  } else {
    if (!transparent) {
      transparent = true;
      $('header').removeClass('changeColor');
    }
  }
});

header {
  padding-top: 10px;
  background-color: transparent;
  color: black;
  position: fixed;
  border:2px solid;
  width: 100%;
  z-index: 1;
}

.changeColor {
  background-color: rgba(30, 32, 35, 0.9);
  transition: all 0.5s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="headernavbar">
  ...
</header>

RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANRANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>DOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>

Answer 2

也许您可以简化代码，如果将其粘贴到开发人员工具的控制台中，您可以看到它正常工作

window.addEventListener('scroll', function(e) { 
    let headerColor = (window.scrollY) > 100 ? 'red' : 'blue';
    console.log(headerColor);
});