5

基本的に、私は現在、固定されたままで、特定のポイントに到達するまでユーザーがスクロールするときにユーザーを追跡する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);

次に例を示します：jsFiddle

2番目のdivに達したら停止したいのは、使用している流動的なレイアウトでは、2番目のdivがブラウザーのサイズに応じて異なるポイントに配置されるためです。停止する特定のポイントを定義しても機能しません。誰かが私がこれを私が望むことをするためにどのように得ることができるかについて何か考えを持っていますか？または、固定divが一定の割合に達すると、スクロールを停止することはできますか？周りを見回しましたが、何も見つかりませんでした。

助けてくれてありがとう。

4

2 に答える 2

8

これはあなたが探していたものですか？

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');

編集：特定のポイントまでスクロールしないというリクエストについては、これを置き換えてください：

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

これとともに：

if ($window.scrollTop() <= (bumperPos - thisHeight)) {
于 2012-06-12T03:26:05.337 に答える
2

MicronXDのフィドルに触発されましたが、ドキュメントの読み込み（またはその他の理由）でDOMが大量にプッシュされる場合に、より柔軟になるように作成されています。これは、私が自分で使用するために開発した別の同様のソリューションです。

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は、フローティング要素が所定の位置にあるときに画面の上部から持つオプションのマージンです。固定、ピクセルで表されます。

于 2013-06-13T02:01:20.423 に答える