[英]Window height doesn't work on browser resize
我有这段代码,当页面具有滚动条时,换句话说,当浏览器高度超过用户桌面分辨率时,显示“滚动到底部”链接。 无论如何,如果最初加载页面时浏览器窗口的高度较大,但是如果我在页面加载后重新调整窗口的大小,则它不会触发,但效果很好。
任何帮助,将不胜感激。
$(function() {
// Check to see if window has scrollbars
if ($(document).height() > $(window).height()) {
$('.scrollToBottom').animate({
opacity : 'show',
height : 'show'
}, 'fast');
} else {
$('.scrollToBottom').animate({
opacity : 'hide',
height : 'hide'
}, 'fast');
}
// Click event to scroll to bottom
$('.scrollToBottom').click(function() {
$('html, body').animate({
scrollTop : $(document).height()-$(window).height()
}, 1500, 'easeOutQuint');
return false;
});
});
这是因为没有“触发器”。
当文档准备就绪时,请参见以下语句$(function() { .// code })
,执行代码。
您需要的是浏览器调整大小时的另一个触发器:
$(window).resize(function (){
if ($(document).height() > $(window).height()) {
$('.scrollToBottom').animate({
opacity : 'show',
height : 'show'
}, 'fast');
} else {
$('.scrollToBottom').animate({
opacity : 'hide',
height : 'hide'
}, 'fast');
}
})
并且由于您不想重复自己,您应该编写一个函数并在这些“触发器”中调用它。
function showBar() {
if ($(document).height() > $(window).height()) {
$('.scrollToBottom').animate({
opacity : 'show',
height : 'show'
}, 'fast');
} else {
$('.scrollToBottom').animate({
opacity : 'hide',
height : 'hide'
}, 'fast');
}
}
$(window).resize(function (){
showBar();
})
$(function() {
showBar();
})
这些触发器称为事件。 供参考: https : //developer.mozilla.org/en-US/docs/Web/Events
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.