5

ユーザーが下にスクロールするとスライドする<divid='map'>マップがあります。ただし、マップを永久にスクロールさせ、ユーザーが実際にページの下部に到達することは決してないようです（フッターがあります）。

私がやろうとしているのは、別の動的サイズ（高さは可変）の<div>の終わりに達したときに、<div>がスクロールを停止するようにすることです。これらの2つの<div>は並んでいて、同じ行にあります。

これは、ユーザーのスクロールで右のdivを移動させるために使用しているJavaScriptコードです。

$(function() {

    var $sidebar   = $("#map"),
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        }
        else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
});
4

1 に答える 1

4

animate()スクロール値は常に変更され、jQueryは同じアニメーションを無限に繰り返すことができないため、スクロール関数でメソッドを使用することはできません。これにより、競合が発生します。ストップもこの問題を救うことはできません、または私はそれをなんとかすることができません。

そして、私はステートメントのバリエーションを使用することをお勧めします。if

これは、アニメーションの使用法でアニメーションのサンプルを動作させていません。

これは、cssメソッドを使用した同じ例です。

$(window).scroll(function() {
    var scrollVal = $(this).scrollTop();
    if ( scrollVal > offset.top) {
        $sidebar.css({
           'margin-top': (($window.scrollTop() - offset.top) + topPadding) + 'px'
                       //added +'px' here to prevent old internet explorer bugs
        });
    } else {
        $sidebar.css({'margin-top':'0px'});
    }
});

注：ifステートメントを拡張する場合はelse if、を使用しないでくださいelse。競合も発生します。私を生きて、私はこの問題に本当に経験があります。

アップデート：

制限の計算にアプローチを変更することもできます。私はあなたがナビゲーションを修正したいと思います、そしてあなたのhtmlはこのようです：

<div class="wrapper">
    <div class="header">header</div>
    <span id="subnav">hold this</span>
</div>​

jQueryの計算は次のようになります 。jsFiddleが機能しています。

$(document).ready(function() {
   $(window).scroll(function() {
       var headerH = $('.header').outerHeight(true);
      //this will calculate header's full height, with borders, margins, paddings
       console.log(headerH);
       var scrollVal = $(this).scrollTop();
        if ( scrollVal > headerH ) {
        //when scroll value reach to your selector
            $('#subnav').css({'position':'fixed','top' :'0px'});
        } else {
            $('#subnav').css({'position':'static','top':'0px'});
        }
    });
 });​
于 2012-08-15T15:07:39.267 に答える