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

Question

ユーザーがスクロールダウンするときにスライドする< div id = '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 
      }); 
     } 
    }); 
}); 

Answer 1

あなたはスクロール値は常に変化しますので、それは対立を作成するスクロール機能付きanimate()メソッドを使用することはできませんjQueryは同じアニメーションを無限に繰り返すことはできません。ストップはこの問題を救済することも、それをすることもできません。

そしてsuggest to use variationのifのステートメント。

Here is same example working with css method.

$(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'}); 
    } 
}); 

注

Here is not working animate sample with animate usage.

：あなたは else ifとの文は、 elseを使用しない場合は、あなたを拡張したい場合は、それはあまりにも競合を作成します。私は本当にこの問題を抱えています。

UPDATE：

あなたも限界の計算にあなたのapprouchを変更することができます。このようにする必要があり

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

とjQueryの計算：私はあなたがNAVを修正したいと推定し、HTMLは次のようである Here is working 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'}); 
     } 
    }); 
});​