CSSでスクロールアニメーションの範囲を制限するにはどうすればよいですか?

ウィンドウ スクロール アニメーションの CSS 値の境界を設定する

問題ステートメント

次のような動的スクロール効果を実装する場合ユーザーのスクロールに合わせて地図が移動するため、ユーザーが際限なくページの下部に到達することを防ぐために、スクロール範囲を制限することが望ましい場合があります。

CSS による解決アプローチ

スクロール イベントで animate() メソッドを使用すると、競合やアニメーションの無限ループが発生する可能性があります。代わりに、margin-top の設定に CSS メソッドを採用することを検討してください。

$(window).scroll(function() {
    var scrollVal = $(this).scrollTop();
    if (scrollVal > offset.top) {
        $sidebar.css({'margin-top': (($window.scrollTop() - offset.top) + topPadding) + 'px'});
    } else {
        $sidebar.css({'margin-top': '0px'});
    }
});

要素の配置の代替アプローチ

margin-top を使用して要素を配置できない場合実現可能な場合は、別のアプローチを使用することもできます。スクロールが特定の点に達したときに要素を修正することが望ましい動作であるというシナリオを考えてみましょう:

$(document).ready(function() {
   $(window).scroll(function() {
       var headerH = $('.header').outerHeight(true);
       var scrollVal = $(this).scrollTop();
        if (scrollVal > headerH) {
            $('#subnav').css({'position':'fixed','top' :'0px'});
        } else {
            $('#subnav').css({'position':'static','top':'0px'});
        }
    });
 });​

以上がCSSでスクロールアニメーションの範囲を制限するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。