2

ウィンドウがスクロールして見えなくなるときに、ウィンドウの下部にdivを修正するにはどうすればよいか疑問に思いました。ツイッターのブートストラップでそれができることは知っていますが、ライブラリは使いたくありません。

これまでのところ、うまくいくと思ったjQueryがいくつかあります。

$(window).scroll(function() {
  if (((($('.show_postQuestion').offset().top + 
            $('.show_postQuestion').height()) - 
            ($(window).scrollTop()+$(window).height())) > 0)) {
    // Post form off-screen
    $('.show_postQuestion').addClass('fixed');
  } else {
    $('.show_postQuestion').removeClass('fixed');
  }
});

.fixedクラスは単なるposition:fixed; bottom:0;。です。

これに伴う問題は、フォームがスクロールオフしてそれ自体を修正すると、フォームが表示されなくなり、テキストスクロールでそれ自体が修正解除され、再び修正されて、ちらつきが発生することです。

誰かがこれまたは代替の解決策を修正する方法について提案があるかどうか疑問に思っていましたか？

ありがとう！

4

1 に答える 1

2

私があなたの質問を正しく理解しているなら、それが通常ページのさらに下にあり、見えないのであれば、ウィンドウの下部に要素を固定したいと思うでしょう。そして、ユーザーが自然な位置までスクロールダウンすると、通常どおりスクロールで流れます。

ページ読み込み時の要素の初期位置を記憶し、それを使用して毎回scrollTop位置と比較するように、関数を少し変更しました。

フィドル

$(function() {
  var $postQ = $(".show_postQuestion"),
      $postQPos = $postQ.offset().top + $postQ.height(),
      $win = $(window);

  $win.scroll(function() {
    if ($postQPos > $win.scrollTop() + $win.height()) {
      // Post form off-screen
      $('.show_postQuestion').addClass('fixed');
    } else {
      $('.show_postQuestion').removeClass('fixed');
    }
  }).trigger('scroll'); // trigger the event so it moves into position on page load
});
于 2013-03-04T09:47:18.250 に答える