时间戳

首页 > 解决方案 > 更改滚动上的徽标

javascript - 更改滚动上的徽标

问题描述

我有这个网站：https ://lapassion.000webhostapp.com/

我的问题是关于标志的，它是白色的，当我向下滚动时会出现一个白条，使标志“消失”。

我在 index.html 上有这段代码

<div class="navbar-header">
    <a href="index.html"><img src="images/logo.png"></a>
</div>

和CSS

.navbar img {
  margin-top: 15px;
  width: 100px;
  height: 50px;
}

我需要将其更改img为我已经拥有的另一个黑色。

我需要做什么？

标签： javascripthtmlcss

解决方案

不是一种非常有效的方法，但其中一种方法可能是：

<html>
<body onscroll="changeHeaderImage()">
<!--     body text -->
</body>
    <script>
    count = 0
    function changeHeaderImage() {
        //check so that it does not change every time you scroll,
        //you can change this condition as per your requirement.
        if(count == 0)
            document.getElementById("imageelement").src = "image.jpeg";

        count = 1

    }
    </script>
</html>

或其他方式是在滚动时添加/删除类，并将类附加到不同的图像源。

  • 您还可以使用IntersectionObserver API哪个更好，因为您可以跳过onscroll每次滚动时发生的事件调用。

推荐阅读