我有以下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也检查时,他们正在调整窗口的大小?
什么好主意吗?
将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'
});
}
}
function myResizeFunction() {
...
}
$(function() {
$(window).resize(myResizeFunction).trigger('resize');
});
这将导致调整大小处理程序在窗口调整大小和文档准备就绪时触发。当然,如果你想让.trigger('resize')在页面加载时运行,你可以将你的resize处理程序附加到文档就绪处理程序之外。
更新:如果您不想使用任何其他第三方库,这里有另一个选择。
该技术将一个特定的类添加到目标元素中,这样您就可以仅通过CSS控制样式(并避免内联样式)。
它还确保只在触发实际阈值点时添加或删除类,而不是在每次调整大小时添加或删除类。它只会在一个阈值点触发:当高度从<= 818变化到> 819时,反之亦然,并且不会在每个区域内多次触发。它与宽度的变化无关。
function myResizeFunction() {
var $window = $(this),
height = Math.ceil($window.height()),
previousHeight = $window.data('previousHeight');
if (height !== previousHeight) {
if (height < 819)
previousHeight >= 819 && $('.footer').removeClass('hgte819');
else if (!previousHeight || previousHeight < 819)
$('.footer').addClass('hgte819');
$window.data('previousHeight', height);
}
}
$(function() {
$(window).on('resize.optionalNamespace', myResizeFunction).triggerHandler('resize.optionalNamespace');
});
例如,你可能有以下一些CSS规则:
.footer {
bottom: auto;
left: auto;
position: static;
}
.footer.hgte819 {
bottom: 3px;
left: 0;
position: absolute;
}