スクロールの値が８００〜４０００pxの時にサイドボタンを表示したい

topからのスクロールの値が８００〜４０００pxの時にサイドにボタンを表示してそれ以外の８００未満または４０００以上の時にはフェードアウトするようにしたいです

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

下のように読み込ませるとチカチカと表示したりしなくなったりを繰り返します

該当のソースコード

html
1<div class="side-botan1" id="side-botan">
2        <a href="#">FOR EXHIBITOR</a>
3      </div>
4      <div class="side-botan2" id="side-botan">
5        <a href="#">FOR VISITOR</a>
6      </div>

css
1#side-botan a {
2  font-weight: 300;
3  font-size: 14px;
4  letter-spacing: 2px;
5  padding: 15px 38px;
6}
7.side-botan1 {
8  position: fixed;
9  right: -71px;
10  bottom: 300px;
11  cursor: pointer;
12  opacity: 1;
13  transform: rotate(-90deg);
14}
15.side-botan1 a {
16  border: 1px solid #fff;
17  background-color: #000;
18}
19.side-botan2 {
20  position: fixed;
21  right: -60px;
22  bottom: 119px;
23  cursor: pointer;
24  opacity: 1;
25  transform: rotate(-90deg);
26}
27.side-botan2 a {
28  border-left: 1px solid #fff;
29  border-top: 1px solid #fff;
30  border-bottom: 1px solid #fff;
31  background-color: #000;
32}
33

jquery
1//サイドボタンの処理
2jQuery(function(){
3  let pagetop=$('.side-botan1, .side-botan2');
4  pagetop.hide();
5  $(window).scroll(function(){
6    if($(this).scrollTop()>800){
7      pagetop.fadeIn();
8    } else {
9      pagetop.fadeOut();
10    }
11  });
12});
13
14jQuery(function(){
15  let pagetop=$('.side-botan1, .side-botan2');
16  $(window).scroll(function(){
17    if($(this).scrollTop()>4000){
18      pagetop.fadeOut();
19    } else {
20      pagetop.fadeIn();
21    }
22  });
23});
24

試したこと

式を一つにしてみた
チカチカして表示されたりされなかったりを繰り返してしまったので４０００の方のjqueryの式の方はopacityで記述してみた

補足情報（FW/ツールのバージョンなど）

コードの書き方が見づらいと思いますが、力をかしていただきたいです、、、

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

回答1件

ベストアンサー

2つのfunctionで fadeIn() fadeOut() しているので、それがお互いに干渉しているではないでしょうか。
１つのfunctionで、８００〜４０００pxの範囲内かどうか判断すればどうでしょう。

js
1jQuery(function(){
2  let pagetop=$('.side-botan1, .side-botan2');
3  pagetop.hide();
4  $(window).scroll(function(){
5    let top = $(this).scrollTop();
6    if(top>800 && top<4000){
7      pagetop.fadeIn();
8    } else {
9      pagetop.fadeOut();
10    }
11  });
12});