スクロール時にスティッキーサイドバーがちらつきます

Question

divの下端に達するとスティックするサイドバーを作成しました。しかし、スクロールするとちらつきそうです。私が間違っていることを助けることができますか？ちらつきの問題を除いて

HTML

<div id="header"></div> 
<div id="stickymain"> 
    <div class="side" id="stickyside"> 
     <p> 
     This is the best we could do and there's nothing more one could expect from here to carry from onwards. I think there's nothing better too. 
     </p> 
     <p> 
     This is the best we could do and there's nothing more one could expect from here to carry from onwards. I think there's nothing better too. This is the best we could do and there's nothing more one could expect from here to carry from onwards. I think there's nothing better too. This is the best we could do and there's nothing more one could expect from here to carry from onwards. I think there's nothing better too.11 
     </p> 
    </div> 
    <div class="main"></div> 
    <div class="main"></div> 
    <div class="main"></div> 
    <div class="main"></div> 
    <div class="main"></div> 
</div> 
<div id="footer"></div> 
<script> 

CSS

body { 
    margin: 0; 
    padding: 10px; 
} 
#header { 
    height: 100px; 
    margin: 0 0 10px; 
    background: red; 
} 
#content { 
    position: relative; 
    float: left; 
    width: 100%; 
    height: auto; 
    margin: 0 -110px 0 0; 
} 
.side { 
    float: right; 
    width: 100px; 
    /* min-height: 500px; */ 
    margin: 0 0 0 10px; 
    background: linear-gradient(red, yellow); 
} 
.main { 
    height: 600px; 
    margin: 0 110px 10px 0; 
    background: lightgray; 
} 
#footer { 
    clear: both; 
    height: 100px; 
    background: orange; 
} 

JS

jQuery(document).ready(function() { 
       jQuery.fn.stickyTopBottom = function(){ 
        var options = { 
         container: jQuery('#stickymain'), 
         top_offset: 0, 
         bottom_offset: 0 
        }; 
        console.log(options); 
        let jQueryel = jQuery(this) 

        let container_top = options.container.offset().top 
        let element_top = jQueryel.offset().top 

        let viewport_height = jQuery(window).height() 
        jQuery(window).on('resize', function(){ 
         viewport_height = jQuery(window).height() 
        }); 



        let current_translate = 0 
        let last_viewport_top = document.documentElement.scrollTop || document.body.scrollTop 
        jQuery(window).scroll(function(){ 
         var viewport_top = document.documentElement.scrollTop || document.body.scrollTop 
         let viewport_bottom = viewport_top + viewport_height 
         let effective_viewport_top = viewport_top + options.top_offset 
         let effective_viewport_bottom = viewport_bottom - options.bottom_offset 


         let element_height = jQueryel.height() 

         let is_scrolling_up = viewport_top < last_viewport_top 
         let element_fits_in_viewport = element_height < viewport_height 

         let new_translation = null 
         if (is_scrolling_up){ 
          if (effective_viewport_top < container_top) 
           new_translation = 0 
          else if (effective_viewport_top < element_top + current_translate) 
           new_translation = effective_viewport_top - element_top 
         }else if (element_fits_in_viewport){ 
          if (effective_viewport_top > element_top + current_translate) 
           new_translation = effective_viewport_top - element_top 

         }else { 
          let container_bottom = container_top + options.container.height() 
          if (effective_viewport_bottom > container_bottom) 
           new_translation = container_bottom - (element_top + element_height) 
          else if (effective_viewport_bottom > element_top + element_height + current_translate) 
           new_translation = effective_viewport_bottom - (element_top + element_height) 
         } 
         if (new_translation != null){ 
          current_translate = new_translation; 
          console.log('i am here at css'); 

          jQueryel.css('transform', ('translate(0, '+current_translate+'px)')); 
         } 
         last_viewport_top = viewport_top 
        }); 
       } 
       jQuery('#stickyside').stickyTopBottom(); 
      }); 

私はスクロールすると、他のすべては、私がしたいだけの方法を働いています。私はChrome、Firefox、Safariを使ってMac上にいる。

CodePen Demo

Answer 1

の代わりにすべての作業を行うためにのみJavaScriptを使用して、あなたはあなたを助けるためにCSSプロパティを使用することができます。ビューポートの特定のポイントに到達したとき

あなたは自分のサイドバーの位置プロパティを変更することができます。

$(window).scroll(function() { 
    var sTop = $(this).scrollTop(); 
    var footerTop = $('#footer').offset().top; 
    var sideHeight = $('.side').height(); 
    var headerHeight = $('#header').height(); 

    if(sTop > headerHeight + (sideHeight/2)) { 
     $('.side').css({ 
     position:'fixed', 
     bottom:'10px' 
     }); 
    } else { 
     $('.side').css({ 
     position:'absolute', 
     bottom:'inherit' 
     }); 
    } 
}); 

を参照してください。このPEN

私はこの1つは、それは大丈夫です願っています！ :)