スクロールで要素を表示、非表示

Question

質問させていただきます。

ページをスクロールした時に、
ページ下部に要素を表示させ、
ページの1番下に来る手前で非表示にしたいと考えています。

下記のソースで、スクロールでページ下部に表示させることは
実現できているのですが、ページの1番下の手前で非表示にするために、
どのように記述すればよいのかご教示いただけないでしょうか。
どうぞよろしくお願いいたします。

<link href="./css/index.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="./js/jquery-3.1.1.min.js"></script> <div class="menu">スクロールで表示</div><!-- menu --> <script> $(window).scroll(function() { var scroll_len = $(window).scrollTop(); if ( scroll_len > 0 ) { $('.menu').animate({height: 'show'}, 'slow' ); } else { $('.menu').animate({height: 'hide'}, 'slow' ); } }); </script>

Answer 1

下記でどうでしょうか。

ページ下部より100px上の位置から非表示にしてますので、そこはお好みで調整してください。

$(window).scroll(function() {
  var scroll_len = $(window).scrollTop();
  var bottom_len = $("body").height() - $(window).height();
  if ( scroll_len > 0 && scroll_len < bottom_len - 100) {
    $('.menu').stop().animate({height: 'show'}, 'slow' );
  } else {
    $('.menu').stop().animate({height: 'hide'}, 'slow' );
  }
});

Codepenサンプル

Comments

[mikiko.s]

ありがとうございます。
ソースを入れてみたのですが、動きに変化がなかったのですが、何か別のソースが邪魔しているのでしょうか。

[hatena19]

質問にサンプルリンクを追加しましたので、そこで動作確認してみてください。
原因が分からなければ、現状のHTML、CSS、Javascript のコードを質問に追記してください。

[mikiko.s]

うまくいきました！！！！助かりました。ありがとうございました。