0

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');
});
4

0 に答える 0