Question

我有这个网站：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更改为我已经有黑色的另一个。

我需要做什么？

Answer 1

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

<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事件调用。

Answer 2

使用此CSS即可处理

.navbar.navbar-default.navbar-fixed-top.affix .navbar-header img {
    background-color: black;
}

如果您想更改徽标，请使用代码而不是background来更改图像src。

此CSS是在粘贴标头/滚动类.affix-fixed更改为.affix时设置的。因此，您可以针对自己的CSS样式，而无需更改JS。

.navbar.navbar-default.navbar-fixed-top.affix .navbar-header img {
     content: url(https://www.google.com/logos/doodles/2019/joseph-plateaus-218th-birthday-5462347081580544-s.png);
}

更改滚动徽标

2 个答案: