jQuery 调整窗口大小

小编典典

jQuery 调整窗口大小

all

我有以下 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在他们调整窗口大小时进行检查？

有任何想法吗？

阅读 66

2022-06-11

共1个答案

小编典典

这是一个使用 jQuery、javascript 和 css 处理调整大小事件的示例。
（如果您只是在调整大小（媒体查询）时对事物进行样式化，那么您最好的选择是 css）
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) { /* ... */ }
});

如何阻止我的调整大小代码如此频繁地执行！？

这是绑定到调整大小时您会注意到的第一个问题。当用户手动调整浏览器的大小时，调整大小的代码会被调用很多，并且感觉很笨拙。

要限制调用调整大小代码的频率，您可以使用下划线和lodash库中的debounce或throttle方法。

debounce只会在最后一次调整大小事件后执行您的调整大小代码 X 毫秒数。当您只想在用户完成浏览器大小调整后调用一次调整大小代码时，这是理想的选择。它非常适合更新图形、图表和布局，因为更新每个调整大小事件可能会很昂贵。
throttle只会每 X 毫秒执行一次调整大小的代码。它“限制”了代码被调用的频率。这不经常用于调整大小事件，但值得注意。

如果您没有下划线或lodash，您可以自己实现类似的解决方案： JavaScript/JQuery: $(window).resize
如何在调整大小完成后触发？

2022-06-11