モーダルウィンドウを開いた時に背景のスクロールを固定する2

以前の記事でも同じ趣旨の内容を書いたのですが、今回は別のやり方でモーダルウィンドウを表示したときの背景を固定します。

正確に言えば前回はモーダルウィンドウを含めたページ全体を固定するイメージでした。
この場合、スクロールバーが表示されるブラウザの場合スクロールバーが消えてしまうんですよね。

今回は固定というよりをスクロールさせない方法で、スクロールバーは消えません。ただし、より固定というイメージから遠いかもしれません。

html

<div id="wrapper">
	<p id="open-modal">
		モーダルウィンドウを開く
	</div>
</div>
<div id="filter-container">
	<div id="modal-container">
		<p id="close-modal">モーダルウィンドウを閉じる</p>
	</div>
</div>

モーダルウィンドウを開く

</div>

<p id="close-modal">モーダルウィンドウを閉じる</p>

</div>

htmlの構造は以前と同じで、土台の要素とモーダルウィンドウの要素を兄弟要素にします。

jQuery

$('#filter-container').css({'display': 'none'});
var pointY;
var fixedPoint;

$('#open-modal').click(function(){
	fixedPoint = $(window).scrollTop();
	$('#filter-container').fadeIn(250);
});

$('#close-modal').click(function(){
	$('#filter-container').fadeOut(250);
});

$(window).scroll(function(){
	pointY = $(window).scrollTop();
	if($('#filter-container').css('display') != 'none' && pointY != fixedPoint){
		$(window).scrollTop(fixedPoint);
	}
});

$('#filter-container').css({'display': 'none'});

var pointY;

var fixedPoint;

$('#open-modal').click(function(){

fixedPoint = $(window).scrollTop();

$('#filter-container').fadeIn(250);

});

$('#close-modal').click(function(){

$('#filter-container').fadeOut(250);

});

$(window).scroll(function(){

pointY = $(window).scrollTop();

if($('#filter-container').css('display') != 'none' && pointY != fixedPoint){

$(window).scrollTop(fixedPoint);

}

});

モーダルウィンドウの要素を非表示にしておき、id open-modalをクリックした際に現在のスクロール値を変数fixedPointに代入します。
スクロールがなされた際に変数pointYにスクロール値を代入し、ウィンドウのスクロール値をfixedPointにもどします。

欠点はブラウザによってスクロールするとカクカクしたり、一度スクロールした後にヒョイと元の位置に戻る点。

if($('#filter-container').css('display') != 'none' && pointY != fixedPoint){
	$(window).scrollTop(fixedPoint);
}

if($('#filter-container').css('display') != 'none' && pointY != fixedPoint){

$(window).scrollTop(fixedPoint);

}

この部分を以下のように変えてもいいかもしれません。
この場合、戻っていることがわかりやすいのかも。ただもう固定とは程遠い？

if($('#filter-container').css('display') != 'none' && pointY != fixedPoint){
	$("html, body:not(:animated)").animate({scrollTop: fixedPoint}, 250);
}

if($('#filter-container').css('display') != 'none' && pointY != fixedPoint){

$("html, body:not(:animated)").animate({scrollTop: fixedPoint}, 250);

}