Question

下面的JS代码用于获取浏览器的高度和.banner div的高度。如果横幅高度大于浏览器高度，请将两个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>

Answer 1

如果图像高度发生变化，则应使用onload方法。

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

为什么我的JS代码间歇性地起作用？

1 个答案: