scrollイベントでカクつく挙動を防ぎたいです。

Question

前提・実現したいこと

jQueryを使用し、ヘッダー、サイドバー、ボックスの高さをそれぞれ取得し、
ボックスのスクロール値が　**ボックス > （ヘッダーの高さ ＋ サイドバーの高さ） **
という条件になったらボックスのposition：fixedがsaticに変更される記述を行いました。

これによりボックスの位置固定が解除され、サイドバーの下にボックスがくっつけばいいのですが、
動かしてみたところ、カクつきが発生してしまいました。この現象はどのようにすれば解消が可能でしょうか。

▼実装デモ
https://jsfiddle.net/Aimrook/ukw0zs6h/1/

ソースコード

var header1H = $('header').outerHeight(); //ヘッダーの高さ
var header2H = $('.header2').outerHeight(true); //ヘッダー2の高さ
var sidebar =  $('.side_1').outerHeight(); //サイドバーの高さ取得
var box_move = header1H + header2H + sidebar; //取得した高さの合計

$(window).scroll(function() {
var sidebar_box =  $('.side_2').offset().top; //ボックスのスクロール値取得
	if( sidebar_box > box_move ){
  	$('.side_2').css('position','static');
  } else {
    $('.side_2').css('position','fixed');
  }
})

お手数ですが、ご教授頂けますでしょうか。
よろしくお願いいたします。

Comments

[Lhankor_Mhy]

position: sticky ではダメなのですよね？

[notes_]

ご回答が遅くなり、申し訳ありません。
はい、IEでの対応もしたいためposition: stickyは使用しない想定です。

Answer 1

こんにちは。

とりあえず、以下のようにしてみてはいかがですか。

var sidebar_box =  $(this).scrollTop()+$(window).height();

Comments

[notes_]

ご教授頂いた記述方法で微調整をした結果、無事理想の実装ができました。
非常に助かりました、ありがとうございます！

Answer 2

$(window).scroll(function() {
var sidebar_box =  $(this).scrollTop() + 200;
	if( sidebar_box > box_move ){
  	$('.side_2').css('position','static');
  } else {
    $('.side_2').css('position','fixed');
  }
})

一応こんな感じで良いのならやりたいことはできるかと思います。
（もっといいやり方あるかもしれませんが）