jQueryアニメーションをページの端からスクロールする

Question

スクロールバーが下に移動してコンテンツを表示する場合でも、ウィンドウの右側に凍っているように振る舞いたいサイドバーがあります。私はそれを完全に固定して、サイドバーがjQueryを使ってページをスクロールダウンすることでそれを処理しました。現在のところ、これは私がこれを扱う方法です。

<script type="text/javascript"> 
$(window).scroll(function() { 
    $('#sidebarPage1').animate(
     { top: $(window).scrollTop() + 'px' }, 
     { queue: false, duration: 500, easing: 'easeInOutSine' } 
    ); 
}); 
</script> 

彼らはバーが終わる一番下に完全にスクロールすると、ユーザーは小さなビューポートを持っている場合、サイドバーの上部は、およそ150ピクセル、上からによって相殺されるので、私は私のページの100％幅のヘッダーとフッターを持っています私のフッタの下に行くか、それは画面から完全に離れた本当に小さなビューポートです。

トップに設定する項目を簡単に計算し、ビューポートの下部から約200ピクセルを停止してフッターをクラッシュさせないようにする方法はありますか？ジョエルの答えから

更新：

<script type="text/javascript"> 
    $(window).scroll(function() {    
     var dynamicSidebarHeight = $('#sidebar').height();    
     var fixedFooterOffset = 168; 
     var scrollTo = $(window).scrollTop() 
     var calculatedMaxTop = $('#footer').offset().top - 
        dynamicSidebarHeight - fixedFooterOffset; 

     if (scrollTo > calculatedMaxTop) { 
      scrollTo = calculatedMaxTop; 
     } 
     $('#sidebarPage1') 
      .animate(
       { top: scrollTo + 'px' }, 
       { queue: false, duration: 500, easing: 'easeInOutSine' } 
     ); 
    }); 
</script> 

固定 .Height（）関数

は

Answer 1

はたぶん、フッターのトップを使うのか？

$(window).scroll(function() { 
    var scrollTo = $(window).scrollTop() 
    if (scrollTo > ($("#footer").offset().top - 200)) 
     scrollTo = $("#footer").offset().top - 200; 

    $('#sidebarPage1').animate(
     { top: scrollTo + 'px' }, 
     { queue: false, duration: 500, easing: 'easeInOutSine' } 
    ); 
}); 

未テスト。これを動作させるには、parseIntを実行する必要があります。

Answer 2

私は、このソリューションをどのように作成したかについて、この効果をより深く掘り下げる方法についてブログ記事を投稿しました：Using jQuery to create a scrolling sidebar。