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);
}

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

 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，添加课程时，请将其删除。

＆＃13;

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');
    }
  }
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

from tkinter import *
from modules.animation import animation

root=Tk()

cosmog=animation(root,image="cosmog.gif").animate(0)
cosmoem=animation(root,image="cosmoem.gif").animate(0)
lunala=animation(root,image="lunala.gif").animate(0)

root.mainloop()

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

2 个答案: