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