Question

我写了一个代码，可在滚动后更改菜单徽标。滚动后，代码还会添加一个类（不同的样式-top-nav-collapse具有透明的背景）。对于透明背景，在滚动logo.png（白色背景）之后，我想要logo-white.png。一切都很好，但我想始终将768px用于移动设备的logo.png（移动菜单始终具有白色背景）。移动设备徽标不宜更改。

jQuery

$(window).scroll(function() {
    if ($(".navbar").offset().top > 50) {
        $(".navbar-fixed-top").addClass("top-nav-collapse");   
        $('.nav-logo img').attr('src','https://example.com/images/logo.png');
    } else {
        $(".navbar-fixed-top").removeClass("top-nav-collapse");   
        $('.nav-logo img').attr('src','https://example.com/images/logo-white.png');
    }
});

HTML

<a href="#" class="nav-logo"><img src="images/logo-white.png"></a>

Answer 1

我认为您正在寻找window.matchMedia，您可以在JavaScript中使用它来获取目标。一个例子可能是

if(window.matchMedia("(min-width: 768px)")) {
    //your javascript code targeting that media
}

此功能支持在CSS中指定复杂的媒体查询。只需尝试匹配您的目标媒体并应用window.scroll功能

滚动后更改徽标-移动设备问题

1 个答案: