ページトップボタンが画面を小さくすると消えてしまいます。

Question

以下のようなコードでページトップボタンを作成しました。
フルサイズでは問題なくトップページボタンが表示されていて機能するのですが、
ヘッダーなどがレスポンシブすると消えてしまいます。
どこを改善すればレスポンシブ後も消えずに表示されたままになりますか？
メディアクエリでまた同じコードを書けば、表示されそうですが、
なんで消えたのかの理由がよくわからなくて気持ち悪いです。
ヘッダーとなぜ連動しれるのかもよく分からないです。
よろしくお願いします。

<!--　pagetopボタン　-->
<div class="page-top">
  <img src="img/page_top.gif" alt="ページトップボタン">
</div>

.page-top {
  position: fixed;
  right: 18px;
  bottom: 10px;
  z-index: 99;
}

.page-top img {
  width: 65px;
  height: 65px;
  opacity: 0.5;
}

$(function() {
    
  /*トップページボタン制御*/
  $('.page-top').hide();  //トップページボタン非表示
  
  $(window).scroll(function(){
      if($(this).scrollTop() >100 ) {// スクロールが100より大きい場合
          $('.page-top').fadeIn();  //フェードイン
      } else {
          $('.page-top').fadeOut();  //フェードアウト
      }
  });

  $('.page-top').click(function () { // TOP-Pageボタンクリックされた時
      $('.body,html').animate({scrollTop: 0}, 500); // TOPへスクロール
      return false;
  });
});

Comments

[hatena19]

提示のコードだけだと現象が再現できません。
現象が再現できるコードを提示してください。

> メディアクエリでまた同じコードを書けば、表示されそうですが、
これは実際に試して表示されるのは確認済みですか。

[Lhankor_Mhy]

とりあえず、「ヘッダーなどがレスポンシブする」コードをご提示ください。

[m.ts10806]

初期hideしていて、表示されるのは`if($(this).scrollTop() >100 ) {// スクロールが100より大きい場合`このときだけのようですから、そこを調整すれば良いのでは。
このコードが全てなら上記だけのアドバイスで良いのですけど、何が影響するかは全て見てみないと分かりません。

Answer 1

 /*トップページボタン制御*/
  $('.page-top').hide();  //トップページボタン非表示

  $(window).scroll(function(){
      if($(this).scrollTop() >100 ) {// スクロールが100より大きい場合
          $('.page-top').fadeIn();  //フェードイン
      } else {
          $('.page-top').fadeOut();  //フェードアウト
      }
  });

この部分を消したら表示されすようになりました。アドバイスありがとうございます。