jQueryで変数の定義を1回で済ませたい

前提・実現したいこと

ページを開いて1秒経ったらバナーを表示。
スクロール中はバナーを非表示にし、スクロールが止まったらバナーを表示。
フッターに入った場合、バナーは非表示。
slideinというclassをつけることで表示非表示を切り替えています。

発生している問題・エラーメッセージ

jQueryで変数が下の関数で読み込まれません...
いろいろ調べたのですが、原因が特定できず、ご教示いただけますでしょうか...

該当のソースコード

jQuery
1$(function(){
2  var fixedBanner = $('.fixed-banner');
3  fixedBanner.delay(1000).queue(function(){
4    fixedBanner.addClass('slidein');
5  });
6  $(window).scroll(function () {
7    var check = window.pageYOffset;
8    var docHeight = $(document).height();
9    var dispHeight = $(window).height();
10    fixedBanner.removeClass('slidein');
11    if(check > docHeight - dispHeight - 134) {
12      fixedBanner.removeClass('slidein');
13    }
14  });
15  $(window).on("scrollstop",function(){
16    var check = window.pageYOffset;
17    var docHeight = $(document).height();
18    var dispHeight = $(window).height();
19    if(check > docHeight - dispHeight - 134) {
20      fixedBanner.removeClass('slidein');
21    } else {
22      fixedBanner.addClass('slidein');
23    }
24  });
25});

scrollstop関数は別で関数を作成しており、スクロールが止まったら発火するようにしております。
下記の変数を2回宣言しているため、できれば1回で済ませたいです。

jQuery
1    var check = window.pageYOffset;
2    var docHeight = $(document).height();
3    var dispHeight = $(window).height();

試したこと

上記の3行を外に出してみたが、意図した挙動にならない。

jQuery
1$(function(){
2  var fixedBanner = $('.fixed-banner');
3  var check = window.pageYOffset;
4  var docHeight = $(document).height();
5  var dispHeight = $(window).height();
6  fixedBanner.delay(1000).queue(function(){
7    fixedBanner.addClass('slidein');
8  });
9  $(window).scroll(function () {
10    fixedBanner.removeClass('slidein');
11    if(check > docHeight - dispHeight - 134) {
12      fixedBanner.removeClass('slidein');
13    }
14  });
15  $(window).on("scrollstop",function(){
16    if(check > docHeight - dispHeight - 134) {
17      fixedBanner.removeClass('slidein');
18    } else {
19      fixedBanner.addClass('slidein');
20    }
21  });
22});

お手数をおかけ致しますが、よろしくお願いいたします。

int32_t

2022/01/06 08:12

> jQueryで変数が下の関数で読み込まれません... 「変数が読み込まれない」とはどういう意味でしょうか。どういう動作を期待していて、実際はどうなりますか?

yuta_saito

2022/01/06 14:59

ご返信いただき、ありがとうございます！質問が言葉足らずで申し訳ありません。期待している動作としては、上記に記載した「ページを開いて1秒経ったらバナーを表示。スクロール中はバナーを非表示にし、スクロールが止まったらバナーを表示。フッターに入った場合、バナーは非表示。」であり、「該当のソースコード」に記載しているソースコードで実装できました。ただ、変数を2回定義しているため、「変数の定義を1回で済ませたい」というのが、今回やりたいことです。お手数をお掛け致しますが、何卒よろしくお願いいたします。

int32_t

2022/01/06 15:23

> 変数の定義を1回で済ませたいそれをこの質問のタイトルにすべきかと思います。

yuta_saito

2022/01/09 15:10

返信が遅くなり申し訳ありません。大変失礼いたしました！タイトルを修正いたしました！

行動規範の内容に同意します

回答1件

ベストアンサー

3行程度ならそのまま重複してもいいんじゃないかな、という感想ですが、それでも共通コードをシェアするなら、以下のようにするといいかもしれません。

js
1$(function(){
2  var fixedBanner = $('.fixed-banner');
3  fixedBanner.delay(1000).queue(function(){
4    fixedBanner.addClass('slidein');
5  });
6
7  function shouldRemoveSlideIn() {
8    var check = window.pageYOffset;
9    var docHeight = $(document).height();
10    var dispHeight = $(window).height();
11    return check > docHeight - dispHeight - 134;
12  }
13
14  $(window).scroll(function() {
15    fixedBanner.removeClass('slidein');
16    if (shouldRemoveSlideIn())
17      fixedBanner.removeClass('slidein');
18  });
19
20  $(window).on("scrollstop", function() {
21    if (!shouldRemoveSlideIn())
22      fixedBanner.addClass('slidein');
23  });
24});