別のdivに到達したらdivをスクロールしない

Question

基本的に私は現在、固定されたままのdivを持っています。私は以下の例で行ったように、固定ピクセル位置で簡単に停止させることができますが、jQueryのばかだから、divで停止する方法はわかりません。ここで

は、私がこれまで使用してきたものだ：

var windw = this; 

$.fn.followTo = function (pos) { 
    var $this = this, 
     $window = $(windw); 

$window.scroll(function(e){ 
    if ($window.scrollTop() > pos) { 
     $this.css({ 
      position: 'absolute', 
      top: pos 
     }); 
    } else { 
     $this.css({ 
      position: 'fixed', 
      top: 0 
     }); 
    } 
}); 
}; 

$('#one').followTo(400); 

はここでの例です：流体レイアウトで、私は」ので、私はそれが第二のdivに達すると、それを停止したいjsFiddle

理由がありますを使用すると、2番目のdivはブラウザのサイズに応じて異なるポイントに座ります。それを止める特定のポイントを定義することはできません。私はこれをどのようにして自分が望むことができるのか誰にでも分かっています。あるいは、固定小数点がスクロールを停止した後、スクロールがパーセンテージに達することは可能ですか？私は周りを見回しましたが、何も見つかりませんでした。

ありがとうございました。

Answer 1

この商品をお求めの客様はこんな商品もお求めです。

http://jsfiddle.net/Tgm6Y/1447/

var windw = this; 

$.fn.followTo = function (elem) { 
    var $this = this, 
     $window = $(windw), 
     $bumper = $(elem), 
     bumperPos = $bumper.offset().top, 
     thisHeight = $this.outerHeight(), 
     setPosition = function(){ 
      if ($window.scrollTop() > (bumperPos - thisHeight)) { 
       $this.css({ 
        position: 'absolute', 
        top: (bumperPos - thisHeight) 
       }); 
      } else { 
       $this.css({ 
        position: 'fixed', 
        top: 0 
       }); 
      } 
     }; 
    $window.resize(function() 
    { 
     bumperPos = pos.offset().top; 
     thisHeight = $this.outerHeight(); 
     setPosition(); 
    }); 
    $window.scroll(setPosition); 
    setPosition(); 
}; 

$('#one').followTo('#two'); 

EDIT：これで

if ($window.scrollTop() > (bumperPos - thisHeight)) { 

：MicronXDのフィドルに触発さ

if ($window.scrollTop() <= (bumperPos - thisHeight)) { 

Answer 2

ある時点までスクロールしないようにあなたの要求については、単にこれを置き換えますしかし、DOMがdocの多くをプッシュしているときにもっと柔軟に書かれていますument負荷（またはその他の理由）、ここで私は私自身の使用のために開発された別の同様のソリューションです：

jQuery.fn.extend({ 
    followTo: function (elem, marginTop) { 
    var $this = $(this); 
    var $initialOffset = $this.offset().top; 
    setPosition = function() { 
     if ($(window).scrollTop() > $initialOffset) { 
     if (elem.offset().top > ($(window).scrollTop() + $this.outerHeight() + marginTop)) { 
      $this.css({ position: 'fixed', top: marginTop }); 
     } 
     if (elem.offset().top <= ($(window).scrollTop() + $this.outerHeight() + marginTop)) { 
      $this.css({ position: 'absolute', top: elem.offset().top - $this.outerHeight() }); 
     } 
     } 
     if ($(window).scrollTop() <= $initialOffset) { 
     $this.css({ position: 'relative', top: 0 }); 
     } 
    } 
    $(window).resize(function(){ setPosition(); }); 
    $(window).scroll(function(){ setPosition(); }); 
    } 
}); 

次に、あなたのような機能を実行することができます。

$('#div-to-move').followTo($('#div-to-stop-at'), 60); 

60は、あなたがしたいオプションの余裕であります浮動要素は、定位置にあるときに画面の上部から持ちます（ピクセル単位）。