ウィンドウのスクロール中に要素をコンテナ内に固定する

Question

画像を使って説明するとよいと思うので、添付します。

オクラホマので、基本的に私が持っているもの、我々が固定要素として参照されますされ、親コンテナ、およびその内部の要素（それは実際にはテキストのブロックになります）です。

ユーザーがページの一番上にいるときは、固定要素を親の一番上に配置します。ユーザーがページのスクロールを開始し、親がビューポートの上に移動を開始すると、fixed要素が親の一番下に達するまでスクロールするようにします。

私はこのウェブサイトの大まかなスケッチ練習の段階にあるため、現在のところHTMLやその他のものはありません。

私はJSスキルが限られていて、jQueryに精通していますが、コードをコピーして貼り付けても構いません。

ご協力いただきますようお願い申し上げます。ありがとう！

Answer 1

javascript（jQueryの有無にかかわらず）を使用して、要素の位置を絶対的に親の位置に変更したい場合、親は相対的でなければなりません。スクロールバーの位置に基づいて位置を変更します。

このチュートリアルでは、その方法を説明しています。いくつかの応答ページやブラウザのサイズを変更するために

http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/

Answer 2

、サイドバーは中心的な要素になります。あなたはブレーキポイントを気にしたいかもしれません。私は786を使用しました。また、divは先頭に配置されていない可能性があるので、コードでオフセットを設定する必要があります。

<script> 
    $().ready(function() { 
     var $scrollingDiv = $("#scrollingDiv"); 
     var $div_top = $scrollingDiv.offset().top; 
     $(window).scroll(function(){ 
      if(window.outerWidth > 786) { 
       var $scroll_top = $(window).scrollTop(); 
       if($scroll_top > $div_top) { 
        $pos = $scroll_top - $div_top; 
        $scrollingDiv 
         .stop() 
         .animate({"top": $pos + "px"}, "slow"); 
       } else if($('#scrollingDiv').offset().top > $div_top) { 
        $scrollingDiv 
         .stop() 
         .animate({"top": "0px"}, "slow"); 
       } 
      } else { 
       $scrollingDiv.css("top", 0); // sidebar became center object 
      } 
     }); 
     $(window).resize(function() { 
      if(window.outerWidth > 786) { 
       var $scroll_top = $(window).scrollTop(); 
       if($scroll_top > $div_top) { 
        $pos = $scroll_top - $div_top; 
        $scrollingDiv 
         .stop() 
         .animate({"top": $pos + "px"}, "slow"); 
       } else if($('#scrollingDiv').offset().top > $div_top) { 
        $scrollingDiv 
         .stop() 
         .animate({"top": "0px"}, "slow"); 
       } 
      } else { 
       $scrollingDiv.css("top", 0); // sidebar became center object 
      } 
     }); 
    }); 
</script>