ウィンドウの高さに対して、半分のscroll量で表示したい

Question

前提・実現したいこと

scrollイベントを使って、
ウィンドウの高さに対して、半分のscroll量で表示したいと思っており、
jsを組んでみましたが、うまくいきませんでした。

実装ページ
https://codepen.io/satoru1993/pen/NZmNxq

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

scroll量が半分もいかないで、
該当の要素が表示されてしまいます。

該当のソースコード

<div class="pickup-wrap">
  <p>表示されます</p>
</div>

.pickup-wrap{
  display:none;
  position:fixed;
}
body{
  height:2000vh;
}

$(window).scroll(function () {
              var windowHeight = $(window).height();
             
if ($(window).scrollTop() > windowHeight/2) {
                  $('.pickup-wrap').fadeIn();
              }
             
 });

試したこと

上記の通り
$(window).height();に対して、
/2をすることで、半分の量にしておりますが、
半分にもいかず、表示されてしまいます。

問題点の指摘などいただけますと
幸いです。

宜しくお願い致します。

Answer 1

$(window).height();の場合、ブラウザのウィンドウの高さになってしまいます。
$('html, body').height();に変更してみてください。

Comments

[satoru225Simple]

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