通过CSS向上滚动时如何更改粘性菜单的徽标？

Question

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

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

Answer 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设置可见性。