状況
- windowTopの位置によって画面上部にFixするナビをクラスで制御
fixnav.js
var headerTop = $('#headerWrap').offset().top;
$(window).on('scroll', function(){
var windowTop = $(window).scrollTop();
if(headerTop <= windowTop) {
$('#header').addClass('fixed');
} else {
$('#header').removeClass('fixed');
}
});
- 同時にそのナビはSwipeでコンテンツの切り替えも行う
- Swipeが終わる前にFixイベントが発動するとナビゲーションが変な位置に固定される
- ずれている要素の
offset().top
をコンソールで確認するとは正常な位置で取れている - Inspectorで要素を確認すると正常な位置にいる
## 予想
レンダリングの問題?
swipeイベントとposition:fixed
が取れた瞬間の要素のレンダリングが間に合ってない?
結果
position:fixedをかけている要素にpositionを指定してあげるとなおった!
原因はよくわからないけど、CSSでレンダリングの位置をちゃんと指定してあげないといけないのかな。。。
ちなみにtop:0
では同じ現象が発生するので、ダメでした。。
header.css
#header {
position: relative;
top: 1px;
margin-top: -1px; //レイアウト調整用
}