0

下面的 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>
4

1 回答 1

0

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

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

于 2012-07-11T13:29:31.243 回答