JS打破窗口调整大小

Question

我有一个网站，我在滚动上使用两个不同的标志，但我只使用一个，如果屏幕小于1024px。

一切都按预期工作，除了在此屏幕上调整大小的屏幕。它不显示任何在头部的标志，但如果我刷新页面，它的工作原理...

这是我的代码：

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

您目前拥有的JS代码，当页面才会被触发加载，因为你正在使用

$(document).ready(function() { 
    //Main menu animation 
}); 

jQuery有.resize()前夕nt处理程序，它会在浏览器窗口调整大小时触发，所以我建议使用下面的代码，如果你真的想坚持一个JS解决方案。虽然我发现媒体的质疑在这个特定的情况好了很多，使用/平滑：

$(window).resize(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 2

只需使用@media screen and (min-width: 1024) { logo { display: none; }}隐藏您的标志。根据不同，您不需要JS来处理可见。你也可以这样做object.addEventListener("resize", myScript);

Answer 3

这是因为处理窗口宽度的代码在滚动之前被调用，这意味着当窗口调整大小时，徽标将保持不变，直到我在浏览器中刷新的页面和代码被重新加载。要解决此问题，请使用jQuery的$(element).resize()处理程序来解决此问题。另一种解决方案是使用CCS媒体查询与1,024像素

文档的最大宽度链接

https://api.jquery.com/resize/

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Answer 4

您需要开枪的窗口大小调整事件，并运行你的代码，你

function myfunction() { 
 
    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" 
 
     }); 
 
     } 
 
    }); 
 
    } 
 
}; 
 

 
$(document).ready(function() { 
 
    myfunction(); 
 
}); 
 
$(window).on('resize', function() { 
 
    myfunction(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>

01：也就是在页面加载

$(window).on('resize', function() { 
    // call your function here 
}); 

见代码段运行代码

Answer 5

我不能强调不够多少，你应该与媒体查询，谢尔盖提出来这样做。

它可以完成与JS和事件处理程序，但CSS @media查询将成为你的朋友在这里。

Answer 6

如果您要响应窗口大小调整，您可能需要聆听resize jQuery event。

这就是说，我的建议是在CSS中使用媒体查询进行管理。 要做到这一点，看看这个答案：@media queries and image swapping