CSS向上滚动时如何更改粘性菜单的标志？答案

【问题标题】：How to change logo of a sticky menu when scroll up by CSS?CSS向上滚动时如何更改粘性菜单的标志？
【发布时间】：2020-03-10 22:58:13
【问题描述】：

这是我的网站http://tapash.atwebpages.com/

如您所见，我的徽标是白色的，向上滚动时它变得不可见。当向上滚动页面并且菜单变得粘滞时，如何通过 CSS 指定徽标？我有另一个彩色标志，我想把它放在那里。谢谢

【问题讨论】：

因为你使用的是img标签，你可以在里面再放一个。因此，当 .small-height 类在父级上时，您可以同时切换 display: block 和 display: none。
谢谢。我理解显示没有部分。但是我如何定义另一个图像来替换它？对不起，我不是专家，你可以说..

标签： css menu sticky

【解决方案1】：

我看到您已经在您的网站上使用了 jQuery。这使得它很容易实现。

为您的图片指定一个用于 JavaScript 的 ID：

<img src="LOGO_WHITE" id="test" />

在滚动时执行一个函数：

$(window).scroll(function (event) {
    ...
});

滚动时（您的标题变为白色），应设置不同的图像：

$("#test").attr("src", "LOGO_BLACK");

但现在的问题是徽标是永久黑色的。当用户在顶部滚动时，您必须再次设置白色徽标：

if($(window).scrollTop() <= 0) {
    $("#test").attr("src", "LOGO_WHITE");
}

因此，您的函数应如下所示：

$(window).scroll(function (event) {
    if($(window).scrollTop() <= 0) {
        $("#test").attr("src", "LOGO_WHITE");
    } else {
        $("#test").attr("src", "LOGO_BLACK");
    }
});

JSFiddle 示例：https://jsfiddle.net/18v9d5eq/1/

看起来您正在使用 Drupal 中的模板。如果您不熟悉 Web 技术，我上面的解决方案是最简单的。最干净的解决方案是在标题中包含两个图像（白色和黑色），然后使用 display: hide/block 设置可见性。

【讨论】：