2

オフセットを渡すことで、要素を別の要素と垂直に揃えようとしています。Chrome では並んでいますが、FF / Safari では必要以上に押し下げられています... 例: http://campaignreport2012.rogerhutchings.co.uk/cinema-verite/

function headalign() {
    var original_offset = ( $("#header").offset() );
    var custom_offset_top = ( $(".wp-post-image").offset().top );
    var custom_offset_left = ( $("#header").offset().left );

    if ( $(window).width() > 768 ) {
        $("#maintitle").offset({
            top: custom_offset_top,
            left: custom_offset_left,
        });
    } else {
        $("#maintitle").offset( original_offset );
    }   

}

if ( $("body").hasClass("single") ) {
    headalign();
    $(window).resize(function() { headalign(); });
}

サイズ変更時に問題なく再計算されますが、最初のロードではダウンしすぎます。誰でも私を助けることができますか？

4

1 に答える 1

3

適切な回答として（コメントの代わりに）：

JavaScript は、ブラウザが受け取った直後に実行されます。このスクリプトのドキュメント内の位置によっては、DOM が完全にロードされる前であっても、これが発生します。

$(document).ready(function(){ headalign(); });DOM ロードで関数を実行します。しかし、この時点では、画像も 'BlockGothic' フォントもレンダリングされません。したがってcustom_offset_top、0またはその他の値 (画像なし、カスタム フォントなし) です。

ページが完全にレンダリングされるまで待つ必要があります。

$(window).load(function(){ headalign(); });

これにより、 の最初のちらつきやジャンプ ダウンが発生します"#maintitle"。"#maintitle"最初に隠れて、ページがレンダリングされた後にフェードインすることを一種の「修正」できます。

CSS:

#maintitle {
    display: none;
}

JavaScript:

$(window).load(function(){
    headalign();
    $("#maintitle").fadeIn(200);
});

これが役に立ったことを願っています！

于 2012-09-04T10:11:31.420 に答える