スクロールしたらついてくる固定ヘッダーについて

Question

jQueryに最近いろいろ手を出していますがまだふんわり理解程度の状態です。

jQueryでスクロールしたらついてくる固定ヘッダーを実装したのですが、
ブラウザサイズを変更して、リロードをしていないときに
固定ヘッダーに切り替わるスクロールの位置がずれるという現象が起こります。

おそらくブラウザサイズ変更時にその他の要素のheightが変更するため。

navbar.offset().top
$(window).scrollTop()

などの値と実際の値が異なってしまうためと思っております。

正直ブラウザサイズ変更したらリロードするか、そんなに気にならないといえばそうなのですが、もし解決策を知っている方がおられましたらご教授ください。

Answer 1

ありがとうございました。

おかげさまで解決の方法がわかりました。

教えていただいた通り、

$(function() {
    var timer = false;
    $(window).on('load resize', function(){
        if (timer !== false) {
        clearTimeout(timer);
        }
        // resize後処理
        timer = setTimeout(function() {
            nav_offset = nav.offset().top; //この一行だけにしてみるとか（＾ｖ＾）
        }, 200);
    });
});

を行うことによってナビの位置を再度取得することに成功しました。

しかし、ナビ自体がfixedで固定されており
取得するタイミングの位置で設定されるため、位置のづれが起こってしまいました。

それを回避するために、Html上でナビを複製し、
複製したナビをdisplayの切り替えとposition:fix
で擬似的につくることによって
先ほどのコードによるナビの位置取得(nav.offset().top)が、もともとのナビの位置を取得してくれるため
ズレることなく実装することができました！

Comments

[noise]

ご解決おめでとうございます。
解決に至るN_Kura様のご苦労に頭が下がる思いです。
素敵なサイトととなりますことを心よりお祈りさせていただきます。
ありがとうございました。（＾▽＾）

Answer 2

こんにちは。

jQueryでスクロールしたらついてくる固定ヘッダーを実装したのですが、
ブラウザサイズを変更して、リロードをしていないときに
固定ヘッダーに切り替わるスクロールの位置がずれるという現象が起こります。

ある一定のスクロール量で、navbarが固定される仕組みで。
ページが読み込まれた時に、「ある一定のスクロール量」が設定される処理とお見受けいたします。

なので、リサイズなどで要素の高さが変化されてもページ読み込み時の設定が更新されないので、理想と異なってしまう症状ということでしょうか。

正直ブラウザサイズ変更したらリロードするか

おっしゃるとおり、「ブラウザサイズが変更したら」固定するトリガとなるスクロール量を再設定するようにしてはいかがでしょうか。

参考サイト：リサイズ操作が終わった時だけ処理を実行する
http://kadoppe.com/archives/2012/02/jquery-window-resize-event.html

※どうすれば再設定できるかは、どのように実装しているのかが分からないと想定できません

ご参考程度の回答ですが、何かのヒントになれば幸いです。

--------------------------------------------------コメント後の追記

// resize後処理箇所を修正してみました

$(function() {
	var $body = $('body')
	var nav = $('#fixedBox');　//navのid
	var nav_offset = nav.offset().top;
	$(window).scroll(function(){
		var now_offset = $(window).scrollTop();
		if(now_offset >= nav_offset ) {
			$body.addClass('fixed'); //別事情でbody.fixed nav  position:fixed みたいにしております
		} else {
			$body.removeClass('fixed');
		}
	});
});


$(function() {
	var timer = false;
	$(window).on('load resize', function(){
		if (timer !== false) {
		clearTimeout(timer);
		}
		// resize後処理
		timer = setTimeout(function() {
			nav_offset = nav.offset().top; //この一行だけにしてみるとか（＾ｖ＾）
		}, 200);
	});
});

Comments

[N_Kura]

こんにちは。

さっそくのご回答ありがとうございます！
説明不足申し訳ございません。。

少し見づらいかもしれませんが、、、
$(function() {
var $body = $('body')
var nav = $('#fixedBox');　//navのid
var nav_offset = nav.offset().top;
$(window).scroll(function(){
var now_offset = $(window).scrollTop();
if(now_offset >= nav_offset ) {
$body.addClass('fixed'); //別事情でbody.fixed nav { position:fixed みたいにしております
} else {
$body.removeClass('fixed');
}
});
});
ともともと書いておりまして、現在スクロール値がナビまできたらcssでposition:fixを行うと単純にしております。

参考サイトのご教授ありがとうございます。
参考サイトを拝見させてもらい、　
$(function() {
var timer = false;
$(window).on('load resize', function(){
if (timer !== false) {
clearTimeout(timer);
}
// resize後処理
timer = setTimeout(function() {
var $body = $('body')
var nav = $('#fixedBox');
var nav_offset = nav.offset().top;
$(window).scroll(function(){
var now_offset = $(window).scrollTop();
if(now_offset >= nav_offset ) {
$body.addClass('fixed');
} else {
$body.removeClass('fixed');
}
　 });
}, 200);
});
});

とresize後に処理が行われるように設定してみたつもりですが、
今度は、ナビが固定されている状態でブラウザサイズを変更すると、
nav_offsetの位置がブラウザサイズ変更時のナビの高さになっているようで、
その位置までスクロールしないと固定ナビが現れなくなってしまいます(汗)

もしお分りいただければ教えてくださると助かります。

[noise]

つたない参考まででしたが、お汲み取りいただき恐縮です。
class「fixed」が付与されている時なれば、class「fixed」のcssにposition:fixedに続いて、top:0;（画面上端から0ピクセルの高さに位置づけ）を加えれば、固定状態＝何があろうと「画面上端」に「固定」となるような気がします。
外していたらすいません。

[N_Kura]

重ねてアドバイスありがとうございます。
top:0をつけることによってやや改善はされましたが、
やはり画面サイズ変更時にはナビの固定するタイミングはずれてしまいます；；
(失礼いたしました。スクロール後の固定する位置というのは固定されるタイミング(スクロール量)のことです。分りづらい説明、何卒ご了承ください。)

しかし、なんだかもうこれでもいい気がしてしまいました。泣笑

とにかく、誠実にご回答いただきありがとうございます。
もう少しだけ他のかたの回答も待ってみます。

[noise]

解決に至らず申し訳ありません。m(__)m

これを最後にいたしますが、 resize後処理で$(window).scroll(functionを再設定されていますが、たぶん変数の設定だけでよいかもしれません。
ここにコードを書くと見づらくなりますので、コメント投稿後に初期回答の文末に追記いたします。
また、お時間が許される時にでもご笑覧くださいませ。

問題が解決されることを切にお祈り申し上げます。

[N_Kura]

なんどもご教授くださりありがとうございます。
素早くなんども対応してくださったことと、教えていただいたコードをヒントに解決に至りましたのでベストアンサーとさせていただきました！

拙くではありますが、導いた解決方法を自己解決の欄に記載させていただきました。