0

以下の JS コードは、ブラウザーの高さと .banner div の高さを取得するためのものです。バナーの高さがブラウザーの高さよりも大きい場合は、2 つの div (.title と .social) を本文に追加します。それ以外の場合は何もせず、.title と .social の div をそのままにしておきます。

また、ユーザーがページを下にスクロールすると .title および .social div がフェードアウトし、ページの上部に戻ったときにフェードインすることも望んでいます。

問題

このコードは機能しますが、常に機能するとは限りません。正しく表示される場合とそうでない場合があります。つまり、div.banner の高さはブラウザー ウィンドウの高さよりも大きくても、.title と .social は本文に追加されません。この問題が発生する可能性があるコードに問題はありますか?

$(document).ready(function () {

// fade in/fade out banner titles
$(window).trigger('scroll');

var divs = $('.social, div.banner .title'); 
$(window).scroll(function(){
   if($(window).scrollTop() < 10){
         divs.fadeIn("fast");
   } else {
         divs.fadeOut("fast");
   }
});

// Position feature image title and social icons according to browser window height
var windowHeight = $(window).height(); // Gets browser viewport height
var bannerHeight = $(".banner").height(); // Gets .banner height

if (bannerHeight > windowHeight) {
    $("body").append($('.banner .title'));
    $("body").append($('.social'));

}
else {
    //Display .title and .social in .banner div (as originally in HTML)
}
});

参照用のページ読み込み中の HTML コード:

<div class="banner y1">

    <div class="title" id="feature-title">
        <!-- title content here -->
    </div>

    <div class="social" id="feature-social">

        <!-- social content here -->

    </div>
</div>
4

1 に答える 1

0

画像の高さが変わる場合は、onload メソッドを使用する必要があります。

http://api.jquery.com/load-event/

于 2012-07-11T13:29:31.243 に答える