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

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

Answer 2

你需要在窗口调整大小时触发事件并运行你的代码，你所做的就是在页面加载时运行代码

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

请参阅代码段：

 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> 

Answer 3

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

文档链接

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

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

Answer 4

您目前拥有的JS代码只会在您加载页面时触发，因为您正在使用它

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

jQuery有.resize（）事件处理程序，它将在浏览器窗口调整大小时触发，因此我建议使用以下代码，如果你真的想坚持使用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 5

正如谢格尔所建议的那样，我不能强调你应该用媒体查询做多少。

它可以使用JS和事件处理程序完成，但CSS @media查询将是您的朋友。

Answer 6

如果要响应窗口大小调整，可能需要侦听resize jQuery事件 。

也就是说，我的建议是使用媒体查询在css中管理它。 要做到这一点，请看看这个答案： @media查询和图像交换