jQuery無限ループのないスクロール

Question

コンテンツとサイドバーを含む簡単なページを作成しました。ユーザーがスクロールすると、サイドバーが下がります。サイドバーが小さいときは正しく動作しますが、サイドバーが大きいときは無限に下がります。

説明のためにデモページを作成しました。それはこの第2の例では正しい（http://jsbin.com/ojasuj/2/）

作品よう

この最初の例では、サイドバーが小さく、サイドバーは、（http://jsbin.com/ojasuj/）、それは無限ダウン大きいです。

アニメーションを一番下に止めたいと思います。私はこのjavascriptを使用しています：

jQuery.noConflict(); 

jQuery(document).ready(function() { 
    jQuery(document).scroll(function() { 
     if(jQuery(document).scrollTop() <= (jQuery(document).height() - jQuery(window).height())) { 
      jQuery(".sidebar").stop().animate({"marginTop": (jQuery(document).scrollTop() + 10) + "px"}, "slow"); 
     } else { 
      jQuery(".sidebar").css({'margin-bottom': '100px'}); 
     } 
    }); 
}); 

私はいくつかの方法を試しましたが、この問題を解決できませんでした。私はいくつかのスクリプトを使用しようとしましたが、動作しませんでした。私は誰かが私を助けることができるといいです

Answer 1

それはあなたのコンテンツをより大きくだとき、あなたのサイドバーは、常に「高さ」を追加しますので、あなたが代わりにドキュメントの高さのdiv要素の高さを計算する必要があります。

そのためのカップルのマイナーな変更：

HTML

<div id="content"> 
    <p>all your text etc...</p> 
    <div class="clr"></div> 
</div> 

これは、pタグの周りにラップし、コンテンツIDに高さを与えるためにあなたのコンテンツを有効にします。 サイドバーはこの高さを追加したくないので、このコンテンツdivからは除外してください。 CSS

.clr {clear:both;} 

はコンテンツラップを作り

...

JS

if(jQuery(document).scrollTop() <= (jQuery("#content").height() - jQuery(window).height() - 150)) 

あなたはjsbinが少し遅かったので、私はこの1つhttp://jsfiddle.net/tive/ByNde/のためにバイオリンを使用し気にしないホープ私のために。

Answer 2

私がこれを処理する方法は、少しのJSです。サイドバーの高さがウィンドウの高さよりも大きいかどうかを調べます。そうである場合は、サイドバーの '浮動'または '移動'を無効にし、ページの残りの部分と一緒にスクロールできるようにします。

Answer 3

非常に小さいサイドバーがある場合は、とにかくこのようにスクロールするのは意味がありません。ユーザーがサイドバーの下部に何があるかを見たい場合はどうなりますか？彼らは文書の一番下までずっとスクロールする必要があります。

しかし、この作業を行うには、文書全体の高さではなく、メインコンテンツ<div>の高さを確認する必要があります（スクロールするたびに大きくなるため）。

if ($(document).scrollTop() <= ($('#content').height() - $(window).height()) { 
    $('.sidebar').stop().animate({'marginTop': ($(document).scrollTop() + 10) + 'px'}, 'slow'); 
} 

私はDutchie432のソリューション@推薦：

$(document).ready(function() { 
    if ($('.sidebar').height() < $(window).height()) { 
     // init scrolling scrip here 
    } 
});