jQuery在窗口上调整大小

一尘不染

jQuery在窗口上调整大小

css

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

有任何想法吗？

阅读 276

2020-05-16

共1个答案

一尘不染

这是一个使用jQuery，javascript和css处理调整大小事件的示例。
（如果您只是通过调整大小来设置样式（媒体查询），则最好的方法是CSS）

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) { /* ... */ }
});

如何停止调整大小的代码执行如此频繁！

这是绑定大小调整时会注意到的第一个问题。当用户手动调整浏览器的大小时，调整大小的代码称为LOT，可能会感觉很脏。

要限制大小调整代码的调用频率，可以使用下划线和lowdash库中的去抖动或限制方法。

debounce将仅在LAST调整大小事件后的毫秒数内执行您的调整大小代码。当用户调整浏览器的大小之后，只想调用一次调整大小的代码时，这是理想的选择。这对于更新图形，图表和布局很有用，因为更新每个调整大小事件可能会很昂贵。
throttle只会每X毫秒执行一次调整大小的代码。它“限制”了代码的调用频率。调整大小事件不经常使用此方法，但值得注意。

2020-05-16