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

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

用这个:

window.onresize = function(event) {
    ...
}

下面是一个使用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) { /* ... */ }
});

我如何阻止我的调整大小代码执行如此频繁!?

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

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

debounce will only execute your resize code X number of milliseconds after the LAST resize event. This is ideal when you only want to call your resize code once, after the user is done resizing the browser. It's good for updating graphs, charts and layouts that may be expensive to update every single resize event. throttle will only execute your resize code every X number of milliseconds. It "throttles" how often the code is called. This isn't used as often with resize events, but it's worth being aware of.

如果你没有下划线或lodash，你可以自己实现一个类似的解决方案: JQuery JavaScript /: $(窗口)。调整大小完成后如何发射?

您可以使用.resize()绑定调整大小，并在浏览器调整大小时运行您的代码。您还需要添加一个else条件到您的if语句，以便您的css值切换旧的和新的，而不仅仅是设置新的。

给你的匿名函数一个名字，然后:

$(window).on("resize", doResize);

http://api.jquery.com/category/events/