class="bumper" で div に到達したときに固定ヘッダーを停止させる jQuery を使用しています。これをローカルで試してみたところ、問題はありませんでした。ただし、現在、何らかの理由で、キャッシュされたとき (ページを f5-reload した場合) に、ヘッダーが -220px (要素を検査するときに element.style で言う) に設定されていますが、これには問題はありません。この問題の原因は何ですか?
ページへのリンクは次のとおりです 。 http://www.carlpapworth.com/development/utt.se/index.html
CSSは次のとおりです。
header{
width: 100%;
height: 100px;
position: fixed;
top: 0;
background-image: url(../images/milkBG.png);
z-index: 3000;
padding: 5px 0 10px 0;
}
JS は次のとおりです。
$(document).ready(function() {
//stop-header\\
var windw = this;
$.fn.followTo = function ( elem ) {
var $this = this,
$window = $(windw),
$bumper = $(elem),
bumperPos = $bumper.offset().top,
thisHeight = $this.outerHeight(),
setPosition = function(){
if ($window.scrollTop() > (bumperPos - thisHeight)) {
$this.css({
position: 'absolute',
top: (bumperPos - thisHeight)
});
} else {
$this.css({
position: 'fixed',
top: 0
});
}
};
$window.resize(function()
{
bumperPos = pos.offset().top;
thisHeight = $this.outerHeight();
setPosition();
});
$window.scroll(setPosition);
setPosition();
};
$('header').followTo('.bumper');
});