特定のJavaScriptをレスポンシブのスマホの時はオフにしたいです。

Question

$(function(){
    var box    = $("#menu-wrap");
    var boxTop = box.offset().top;
    $(window).scroll(function () {
        if($(window).scrollTop() >= boxTop) {
            box.addClass("fixed");
			$("body").css("margin-top","8vw");
        } else {
            box.removeClass("fixed");
			$("body").css("margin-top","0px");
        }
    });
});

上記の様なメニューバーをトップで固定するスクリプトを入れているのですが
スマホの時はメニューを非表示にしています。
しかしこのスクリプトは効いてしまっていて上にメニューバー分の隙間が出来てしまいます。
ここのスクリプトもスマホに切り替わった時にオフにしたいのですが
どの様にしたら良いのでしょうか？
ご教授お願いいたします。

Answer 1

window.matchMedia で画面幅に合わせて処理を切り分ければ良いと思います。

【[JS] window.matchMedia をつかって JavaScript のコードをレスポンシブに分ける方法 ｜ memocarilog】
https://memocarilog.info/jquery/6500

【window.matchMedia をそろそろ活用してもいい頃 - Qiita】
https://qiita.com/amamamaou/items/a29b29f5267196a5e4ea

Comments

[KEJ]

回答ありがとうございます。

上記のサイトを読んで見たのですが私の理解が及ばずうまく動作させることが出来ませんでした。

document.addEventListener('DOMContentLoaded', function () {
// @media screen and (max-width: 780px) と同じ
var mql = window.matchMedia('screen and (max-width: 780px)');

function checkBreakPoint(mql) {
if (mql.matches) {

} else {
$(function(){
var box = $("#menu-wrap");
var boxTop = box.offset().top;
$(window).scroll(function () {
if($(window).scrollTop() >= boxTop) {
box.addClass("fixed");
$("body").css("margin-top","8vw");
} else {
box.removeClass("fixed");
$("body").css("margin-top","0px");
}
});
});
}
}

// ブレイクポイントの瞬間に発火
mql.addListener(checkBreakPoint);

// 初回チェック
checkBreakPoint(mql);
});

上記のifの部分にこのjavascriptを動作させないコードを書けばいいのでしょうか？

[kei344]

そう使うのではなく元のコードの「if($(window).scrollTop() >= boxTop)」を「if($(window).scrollTop() >= boxTop && window.matchMedia('screen and (max-width: 780px)').matches)」にすればイベントを消さなくても出来るとは思います。

[KEJ]

回答ありがとうございます。
教えて頂いた書き方をしたのですがイベント自体が効かなくなってしまいました。
基本的な部分で私の書き方が間違っているのでしょうか？

$(function(){
var box = $("#menu-wrap");
var boxTop = box.offset().top;
$(window).scroll(function () {
if($(window).scrollTop() >= boxTop && window.matchMedia('screen and (max-width: 780px)').matches){
box.addClass("fixed");
$("body").css("margin-top","8vw");
} else {
box.removeClass("fixed");
$("body").css("margin-top","0px");
}
});
});

[kei344]

あ、「 && !window.matchMedia」か。すみません。

[KEJ]

出来ました。ありがとうございます！

Answer 2

Modernizr を使う手もあります。
デフォルトに組み込まれていないオプション機能なので、
ダウンロード時に Modernizr.mq を追加してやる必要があります。

• レスポンシブデザインでも便利な Modernizr - Qiita
• Modernizr Documentation > Modernizr.mq の項

(追記)
window.matchMedia の方が良さそうですね。
私も今後は window.matchMedia を使いたいと思いました。