PCサイズのみjsを動作させたい

Question

midnight.jquery.min.jsを使っています。
https://aerolab.github.io/midnight.js/

やりたい動作としまして、
ウィンドウサイズが1080px以上のときだけに発動させて、
1080未満はjsを動作させないようにしたいです。

現状だと、1080→800にウィンドウサイズを変更したときは、
jsが発動したままで、思うような実装ができません。
※1080pxを行ったり来たりリアルタイムで動かしたときに、動作⇔無効をリアルタイムで動かしたいです。

$(window).on('load resize', function() {

  //ウィンドウサイズを取得する
  var w = $(window).width();

  if( w > 1080 ) {
    $('#site-id').midnight();
  } else {
    $('#site-id').removeAttr('style');
      
  }
});

どのように記述すればよいのでしょうか

js動作前

<div id="site-id">
<img src="logo.png" alt=""/>
</div>

js動作後

<div id="site-id" style="position: fixed; top: 0px; left: 0px; right: 0px; overflow: hidden; height: 561px;">
<div class="midnightHeader default" style="position: absolute; overflow: hidden; inset: 0px; transform: translateY(-52.4955%) translateZ(0px);">
<div class="midnightInner" style="position: absolute; inset: 0px; transform: translateY(52.4955%) translateZ(0px); overflow: auto;">
<img src="logo.png" alt=""/>
</div>
</div>
<div class="midnightHeader black" style="position: absolute; overflow: hidden; inset: 0px; transform: translateY(47.4332%) translateZ(0px);">
<div class="midnightInner" style="position: absolute; inset: 0px; transform: translateY(-47.4332%) translateZ(0px); overflow: auto;">
<img src="logo.png" alt=""/>
</div>
</div>
</div>
    

   

Comments

[kei344]

プラグイン／ライブラリは似た名前のものもあるため、取得した場所のURLを質問文に追記ください。（URLにはリンクを張ることができます）

[buk]

こちらをつかいました。
https://aerolab.github.io/midnight.js/

[kei344]

この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文に追記することをお勧めします。

Answer 1

動作⇔無効をリアルタイムで動かしたいです。

基本的に無理です。
※ 一応、ライブラリが書き換えを行った箇所を全て自力（自分でコードを書いて）で戻し、ライブラリが登録したイベントを全て削除してまわれば不可能ではないです。

ライブラリによっては、「元の状態に戻す」ためのメソッドが用意されているものもありますが、お使いのライブラリにはその機能が無いようです。

リサイズ時についてはあきらめて、ファーストビュー時のみ分岐するのが妥当かなと思います。

Comments

[hentaiman]

> （自分でコードを書いて）
もしくは書き換える前の適用させたいelementを保持しておき、ウィンドウサイズに応じて保持したelementに置き換えるって感じですね　inputなどユーザーによって変化する要素があれば無理ですけど