前提・実現したいこと
レスポンシブのサイトを作成しています。
1024px以下では、「.gHeadBtnArea」がスクロールすると表示されて、1025px以上では、何も起こらないようにしたいです。
発生している問題・エラーメッセージ
1024px以下にブラウザ幅を小さくしてから、1025px以上にしたとき、スクロールすると「.gHeadBtnArea」が一瞬消えてしまいます。
該当のソースコード
$(window).resize(function(){
var w = window.innerWidth;
var x = 1024;
var $btn = $('.gHeadBtnArea');
if (w <= x) {
$btn.hide();
$(window).on( 'scroll', function () {
if ( $(this).scrollTop() < 60 ) {
$btn.slideUp('fast');
} else {
$btn.slideDown('fast');}
});
} else {
$btn.show();
$(window).on( 'scroll', function () {
$.noop;
});
}
});