javascript - JS 在窗口调整大小时中断

Question

我有一个网站，我在滚动条上使用了两个不同的 Logo ，但如果屏幕小于 1024 像素，我只使用一个。

一切都按预期工作，除了在屏幕调整大小时中断。它没有在页眉上显示任何 Logo ，但如果我刷新页面，它就可以工作...

这是我的代码:

HTML

<div class="container clearfix" >
      <h2 id="logo"><a rel="home" href="#">LOGO ONE</a></h2>
      <h2 id="logo2"><a rel="home" href="#"><span>LOGO</span> <br/>TWO</a></h2>
</div>

JS

$(document).ready(function() {
    //Main menu animation
    $(function () {
    if($(window).width() >= 1023){
        var targetOffset = $("#section--4").offset().top;
        var $w = $(window).scroll(function() {
        if ( $w.scrollTop() + 200 > targetOffset ) {   
            $("#logo").fadeIn(1000);
            $("#logo2").fadeOut('slow');
            $("header").css({"overflow": "hidden"});
        } else {
            $("#logo2").fadeIn(2000)
            $("#logo").fadeOut('slow');
            $("header").css({"overflow": "visible"});
        }
    });
    }
});

Answer 1

只需使用 @media screen 和 (min-width: 1024) {
标识 {
显示:无；
}} 来隐藏你的标志。您不需要 JS 来处理 visible 取决于 with。你也可以这样做 object.addEventListener("resize", myScript);