JSウィンドウのサイズ変更のサイズ変更

Question

私はスクロールで2つの異なるロゴを使用しているウェブサイトを持っていますが、画面が1024px未満の場合は1つだけ使用します。

すべてが期待通りに機能しますが、画面のサイズ変更ではこれが壊れます。これは、ヘッダ上のロゴのいずれかを示していないが、私はページを更新した場合、それが動作する...

は、これは私のコードです：

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()ハンドラを使用してください。別の解決策は、1024px

の最大幅とCCSメディアクエリを使用することでドキュメントが

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