jQuery スクロールイベント 上下の表示、非表示

Question

###解決したいこと
トップスクロールボタンを下にスクロールした場合は非表示、上にスクロールした場合は表示させるようにしたいのですが、うまく動作しません。

###jQuery

 <!--topボタンスクール上下の表示、非表示-->
        var topHeight = $('#top-btn').height();
	var startPos = 0;
        $(window).scroll(function(){
          var currentPos = $(this).scrollTop();
          if(currentPos > startPos){
            if($(window).scrollTop() > 200){
              $('#top-btn').css('bottom','-' + topHeight + 'px');
            }
          } else {
            $('#top-btn').css('bottom',0 + 'px');
	  }
          startPos = currentPos;
        });            

Comments

[退会済みユーザー]

#top-btnとかHTMLのコードもざっくりでかまわないのであったほうが良いかと思います。

[kotori_00]

アドバイスありがとうございます。

Answer 1

jQuery

<!--topボタンスクール上下の表示、非表示-->
        var topHeight = $('#top-btn-wrapper').height();
        alert();
	var startPos = 0;
        $(window).scroll(function(){
          var currentPos = $(this).scrollTop();
          if(currentPos > startPos){
            if($(window).scrollTop() > 200){
              $('#top-btn-wrapper').css("bottom","-" + topHeight + 50 + "px");
            }
          } else {
            $('#top-btn-wrapper').css("bottom",30 + "px");
	  }
          startPos = currentPos;
        });            

html

<div id="top-btn-wrapper">
<a href="#top" id="top-btn">top</a>
</div>

$('#top-btn')を$('#top-btn-wrapper')へ変更したところ動作しました。

topHeightだけでは、トップボタンの表示が上の部分だけ隠れないのでtopHeight+50とbottomへ隠す高さをプラスしました。

そしてトップボタンを表示させたいとき、cssでpositionのbottom:30pxと指定しているので、.css("bottom",30 + "px")と高さをプラスして元の位置に表示できるように調節しました。