javascript - ウィンドウの垂直方向の高さがスクロールされたら、要素を切り替える方法を理解するのに助けが必要です

Question

javascriptを使用して200px下にスクロールすると、divを相対から固定に切り替えようとしています。ウィンドウの上部から200pxに達すると、divがfixedに切り替わります。そして、私が上からその200pxを超えると、相対に戻るはずです。誰かがこれを行う方法についてのアイデアを持っていますか？

Answer 1

何かのようなもの：

$(window).on('scroll', function() {
    $("#myDivID").css({
       position: $(this).scrollTop()<200?'relative':'fixed',
       top: $(this).scrollTop()<200?'200px':'0px'
    });
});

おそらくtop、要素の位置もリセットする必要があります。

Answer 2

これを行うプラグインが少なくともいくつかあることは知っています。最後に見たものの名前を思い出せませんが、これは私が自分で書いたものです: http://code.google.com/p/sleekphp/source/browse/trunk/Sites/SleekBase/Modules/Base/ JS/jQuery.fixedIfNeeded.js

次のように使用します。

$('#my-element').fixedIfNeeded();

別の要素 (フッターなど) に到達する前に、要素の修正を停止するかどうかを指定するオプションの引数が 1 つあります。

$('#my-element').fixedIfNeeded('#footer');