2

I got a block of content:

<div id="content_holder">
  <div id="fixed_content"></div>
  <div id="bottom_content"></div>
</div>

I want to achieve this - when i scroll down with my mouse, the fixed_content block would turn fixed position and will stick on top of page, until i scroll down to bottom_content.

So far i got this:

var top_positio_saver = $('#fixed_content').offset().top;
$(document).on('scroll', function() {
  if ($('#fixed_content').offset().top < $(document).scrollTop()) {
    $('#fixed_content').css('position', 'fixed');
    $('#fixed_content').css('top', 0);
  }
  if ($(document).scrollTop() < top_positio_saver) {
    $('#fixed_content').css('position', 'static');
    $('#fixed_content').css('top', 0);
    $('#fixed_content').css('margin-top', 0);
  }
});

With this code, the fixed_content block is fixed once i scroll down enough, and turns back to static once i scroll up enough. The problem here is that if i scroll down too much, this block goes on top of bottom_content block, instead i want it to stop near the bottom_content block.

Any suggestions?

4

1 に答える 1

0

offset.top()一番下のブロックと現在のドキュメントの間の距離を使用してみてくださいscrollTop()。

次のコードは動作するはずです。同じ.css()呼び出しで複数の設定を設定できることに注意してください。また、2 番目のif条件は冗長であり、条件に置き換えることができることに注意してelseください。

ロジックは、scrollTopが 550px に達しているが、下部のコンテンツが 500px から始まる場合、#fixed_content要素は から始まるというものtop: -50pxです。そうすることでオーバーフローを防いでいます。

var top_positio_saver = $('#fixed_content').offset().top;
$(document).on('scroll', function() {

  if (top_positio_saver <= $(document).scrollTop()) {
    var distance = $('#bottom_content').offset().top - $(document).scrollTop();
    var newTop = Math.min(0, distance);

    $('#fixed_content').css({
                                'position': 'fixed',
                                'top': newTop
                            });
  }
  else {
    $('#fixed_content').css({
                                'position': 'static',
                                'top': 0,
                                'margin-top': 0
                            });
  }
});
于 2013-09-09T05:54:28.773 に答える