我有以下JQuery代码:
$(document).ready(function () {
var $containerHeight = $(window).height();
if ($containerHeight <= 818) {
$('.footer').css({
position: 'static',
bottom: 'auto',
left: 'auto'
});
}
if ($containerHeight > 819) {
$('.footer').css({
position: 'absolute',
bottom: '3px',
left: '0px'
});
}
});
唯一的问题是,这只适用于浏览器第一次加载,我想containerHeight也检查时,他们正在调整窗口的大小?
什么好主意吗?
jQuery有一个调整大小的事件处理程序,你可以将它附加到窗口。resize()。因此,如果你输入$(window).resize(function(){/* YOUR CODE HERE */}),那么你的代码将在每次窗口调整大小时运行。
因此,您想要的是在加载第一页之后以及窗口调整大小时运行代码。因此,您应该将代码拉到它自己的函数中,并在两个实例中运行该函数。
// This function positions the footer based on window size
function positionFooter(){
var $containerHeight = $(window).height();
if ($containerHeight <= 818) {
$('.footer').css({
position: 'static',
bottom: 'auto',
left: 'auto'
});
}
else {
$('.footer').css({
position: 'absolute',
bottom: '3px',
left: '0px'
});
}
}
$(document).ready(function () {
positionFooter();//run when page first loads
});
$(window).resize(function () {
positionFooter();//run on every window resize
});
参见:跨浏览器窗口大小调整事件- JavaScript / jQuery
将javascript移到一个函数中,然后将该函数绑定到窗口调整大小。
$(document).ready(function () {
updateContainer();
$(window).resize(function() {
updateContainer();
});
});
function updateContainer() {
var $containerHeight = $(window).height();
if ($containerHeight <= 818) {
$('.footer').css({
position: 'static',
bottom: 'auto',
left: 'auto'
});
}
if ($containerHeight > 819) {
$('.footer').css({
position: 'absolute',
bottom: '3px',
left: '0px'
});
}
}