0

固定 div (.featBar) を非表示または表示しようとしています。

(ドキュメント .featbarinline には別の div があり、その配置を除いて .featbar とまったく同じです。固定された .featBar を追い越したいようです)

サイト www.documentjournal.com を見て、私が何をしようとしているのかを確認してください。(下部に固定された白いバーがどのように動作するかを探します)

これが私が今持っているコードです:

<script type="text/javascript">

 var  windowScroll = $(window).scrollTop(),
      slideHeight = $('.rslides1_on').height(),
      windowHeight = $(window).height(),
      diffHeight = slideHeight - windowHeight;

 $(window).scroll(function() { 
   if ( windowScroll > diffHeight ) {
     $('.featBar').show();
   } else { $('.featBar').hide(); };




});
</script>

ここに私が取り組んでいるものへのリンクがあります：

http://thisisaust.myshopify.com/ パス: austaust

また、ブラウザのサイズが変更されるたびに、関数がトリガーされるようにしたいと考えています。

4

1 に答える 1

0

スクロールアップまたはスクロールダウンするたびに更新されるため、スクロール関数内の scrollTop を読み取る必要があります。コードは次のようになります。

<script type="text/javascript">

 var  slideHeight = $('.rslides1_on').height(),
      windowHeight = $(window).height(),
      diffHeight = slideHeight - windowHeight;

 $(window).scroll(function() {
   var windowScroll = $(window).scrollTop();
   if ( windowScroll > diffHeight ) {
     $('.featBar').show();
   } else { $('.featBar').hide(); };

});
</script>

これはうまくいくはずだと思います。

于 2013-07-14T18:18:55.813 に答える