要素を他の要素と交差するまで固定位置に置いて絶対位置に変更します

Question

したがって、説明がビューポートに相対的な固定要素である製品ページがあります。しかし、一番下までスクロールすると、要素はフッターの内容と重なって見えなくなります。

私がしようとしているのは、jQueryを使用して、description要素の下端がフッター要素の上端と重なり始める正確な点を特定し、それを絶対位置に変更することですフッター要素の位置私が望む結果は、それがそうでなければそれを重ねるとき、それがフッターの上に "スティック"することです。

ここに私のコードです：

$(window).scroll(function() { 
    //offset of bottom of element from top 
    var osProduct = $('.product-single__meta').offset().top + $('.product-single__meta').height(); 
    //exact position where footer begins 
    var osFooter = $('.return-link-wrapper').offset().top - 83; 
    if(osProduct >= osFooter) { 
     //change fixed positioning to be sticky to that exact pixel 
     $('.product-single__meta').css('position','absolute'); 
     $('.product-single__meta').css('bottom', osFooter); 
    } 
    else { 
     $('.product-single__meta').css('position','fixed'); 
     $('.product-single__meta').css('bottom','auto'); 
    } 
}); 

.product-single__metaは、説明のdiv要素である、と.return-リンクラッパーはフッターのdiv要素です。

しかし、このオーバーラップポイントを過ぎてスクロールすると、記述divは、私が望むように振る舞うのではなく、固定と絶対の位置を素早く切り替えるようになります。言うまでもなく、最終結果は期待通りではありません。どのようにこの動作を達成できますか？

Answer 1

これは、あなたのdiv要素がページの上から正確に離れている場所に100を設定するコードです。必要に応じて休息を取る。これはjqueryにありますbtw

(function ($) { 
    $(document).ready(function(){ 

    // first we set the position to relative 
    $('.product-single__meta').css('position','relative'); 

    // position absolute when user scrolls more than 100px 
    $(function() { 
     $(window).scroll(function() { 
      // set distance user needs to scroll before setting css 
      if ($(this).scrollTop() > 100) { 
       $('.product-single__meta').css('position','absolute'); 
      } else { 
       $('.product-single__meta').css('position','relative'); 
      } 
     }); 


    }); 

}); 
    }(jQuery));