我有以下 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、javascript 和 css 来处理调整大小事件的示例。
(如果你只是在调整大小时对事物进行样式化(媒体查询),那么 css 是你最好的选择)
http://jsfiddle.net/CoryDanielson/LAF4G/ http://jsfiddle.net/CoryDanielson/LAF4G/
css
.footer
{
/* default styles applied first */
}
@media screen and (min-height: 820px) /* height >= 820 px */
{
.footer {
position: absolute;
bottom: 3px;
left: 0px;
/* more styles */
}
}
javascript
window.onresize = function() {
if (window.innerHeight >= 820) { /* ... */ }
if (window.innerWidth <= 1280) { /* ... */ }
}
jQuery
$(window).on('resize', function(){
var win = $(this); //this = window
if (win.height() >= 820) { /* ... */ }
if (win.width() >= 1280) { /* ... */ }
});
如何阻止我的调整大小代码如此频繁地执行!?
这是绑定调整大小时您会注意到的第一个问题。当用户手动调整浏览器大小时,调整大小代码会被调用很多,并且会感觉非常卡顿。
要限制调整大小代码的调用频率,您可以使用debounce http://underscorejs.org/#debounce or throttle http://underscorejs.org/#throttle方法来自下划线 http://underscorejs.org/ & lodash http://lodash.com/图书馆。
-
debounce
只会在上次调整大小事件后 X 毫秒执行调整大小代码。当您只想在用户完成浏览器大小调整后调用一次调整大小代码时,这是理想的选择。它非常适合更新图形、图表和布局,而更新每个调整大小事件的成本可能很高。
-
throttle
只会每 X 毫秒执行一次调整大小代码。它“限制”代码的调用频率。这并不经常用于调整大小事件,但值得注意。
如果你没有下划线或lodash,你可以自己实现类似的解决方案:JavaScript/JQuery:$(window).resize 如何在调整大小完成后触发? https://stackoverflow.com/questions/2854407/javascript-jquery-window-resize-how-to-fire-after-the-resize-is-completed
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)