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