0

私は自分のウェブサイトの一番上にスクロールする機能に取り組んでいますが、その部分は正常に機能します。しかし、私の問題は、ページの下部に到達したときにフッターと重なっている固定 div があることです。

これが私が働いている機能です。

$(document).scroll(function (e) {
  if (document.body.scrollTop >= 800) {
    $('#beamUp').show(1000);
         } else {
    $('#beamUp').hide(1000);
    return false;
  }  
});

ページのその部分にヒットしたときに検出して、divがそれを通過するのを止めることができる方法はありますか?ヘルプは大歓迎です!

jsFiddle: http://jsfiddle.net/zazvorniki/RTDpw/

4

1 に答える 1

0

ページの高さから問題の div の高さを引いたものとフッターを取得するだけです...上部がその値よりも大きくならないようにしてください... onresize イベント ハンドラーの再評価も必要になりますその値。

あなたのjsfiddleを見て...ここに私の編集があります

スクロール リスナーで、ページの位置を確認し、フローターの下部の位置を適切に調整しています。また、最初の display:none を設定したので、最初のスクリプトで .hide() を呼び出す必要はありません。さらに、ウィンドウのサイズを変更するとスクロールの効果が得られるため、両方のイベントのリスナーを変更しました。

$(document).on('scroll resize', function (e) {
  var viewHeight = $(window).height();
  var viewTop = $(window).scrollTop();
  var footerTop = $("footer").offset().top;
  var baseline = (viewHeight + viewTop) - footerTop;
  var bu = $("#beamUp").css({bottom: (baseline < 0 ? 0 : baseline) + 'px'});

  if (viewTop >= 50) {
    bu.show(1000);
  } else {
    bu.hide(1000);
  }
});
于 2013-05-31T20:30:54.287 に答える