jQueryに最近いろいろ手を出していますがまだふんわり理解程度の状態です。
jQueryでスクロールしたらついてくる固定ヘッダーを実装したのですが、
ブラウザサイズを変更して、リロードをしていないときに
固定ヘッダーに切り替わるスクロールの位置がずれるという現象が起こります。
おそらくブラウザサイズ変更時にその他の要素のheightが変更するため。
javascript
1navbar.offset().top 2$(window).scrollTop()
などの値と実際の値が異なってしまうためと思っております。
正直ブラウザサイズ変更したらリロードするか、そんなに気にならないといえばそうなのですが、もし解決策を知っている方がおられましたらご教授ください。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
ありがとうございました。
おかげさまで解決の方法がわかりました。
教えていただいた通り、
javascript
1$(function() { 2 var timer = false; 3 $(window).on('load resize', function(){ 4 if (timer !== false) { 5 clearTimeout(timer); 6 } 7 // resize後処理 8 timer = setTimeout(function() { 9 nav_offset = nav.offset().top; //この一行だけにしてみるとか(^v^) 10 }, 200); 11 }); 12});
を行うことによってナビの位置を再度取得することに成功しました。
しかし、ナビ自体がfixedで固定されており
取得するタイミングの位置で設定されるため、位置のづれが起こってしまいました。
それを回避するために、Html上でナビを複製し、
複製したナビをdisplayの切り替えとposition:fix
で擬似的につくることによって
先ほどのコードによるナビの位置取得(nav.offset().top)が、もともとのナビの位置を取得してくれるため
ズレることなく実装することができました!
投稿2015/07/17 09:57
総合スコア32
0
ベストアンサー
こんにちは。
jQueryでスクロールしたらついてくる固定ヘッダーを実装したのですが、
ブラウザサイズを変更して、リロードをしていないときに
固定ヘッダーに切り替わるスクロールの位置がずれるという現象が起こります。
ある一定のスクロール量で、navbarが固定される仕組みで。
ページが読み込まれた時に、「ある一定のスクロール量」が設定される処理とお見受けいたします。
なので、リサイズなどで要素の高さが変化されてもページ読み込み時の設定が更新されないので、理想と異なってしまう症状ということでしょうか。
正直ブラウザサイズ変更したらリロードするか
おっしゃるとおり、「ブラウザサイズが変更したら」固定するトリガとなるスクロール量を再設定するようにしてはいかがでしょうか。
参考サイト:リサイズ操作が終わった時だけ処理を実行する
http://kadoppe.com/archives/2012/02/jquery-window-resize-event.html
※どうすれば再設定できるかは、どのように実装しているのかが分からないと想定できません
ご参考程度の回答ですが、何かのヒントになれば幸いです。
--------------------------------------------------コメント後の追記
// resize後処理箇所を修正してみました
javascript
1$(function() { 2 var $body = $('body') 3 var nav = $('#fixedBox'); //navのid 4 var nav_offset = nav.offset().top; 5 $(window).scroll(function(){ 6 var now_offset = $(window).scrollTop(); 7 if(now_offset >= nav_offset ) { 8 $body.addClass('fixed'); //別事情でbody.fixed nav position:fixed みたいにしております 9 } else { 10 $body.removeClass('fixed'); 11 } 12 }); 13}); 14 15 16$(function() { 17 var timer = false; 18 $(window).on('load resize', function(){ 19 if (timer !== false) { 20 clearTimeout(timer); 21 } 22 // resize後処理 23 timer = setTimeout(function() { 24 nav_offset = nav.offset().top; //この一行だけにしてみるとか(^v^) 25 }, 200); 26 }); 27}); 28
投稿2015/07/16 04:43
編集2015/07/16 09:35総合スコア256
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/07/16 06:10
2015/07/16 09:01 編集
2015/07/16 09:30
2015/07/17 09:59
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/07/17 10:49