我有以下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也检查时,他们正在调整窗口的大小?

什么好主意吗?


当前回答

用这个:

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

其他回答

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

将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'
        });
    }
}

试试这个解决方案。仅在页面加载时触发,然后在窗口调整大小期间在预定义的resize delay触发。

$(document).ready(function()
{   
   var resizeDelay = 200;
   var doResize = true;
   var resizer = function () {
      if (doResize) {

        //your code that needs to be executed goes here

        doResize = false;
      }
    };
    var resizerInterval = setInterval(resizer, resizeDelay);
    resizer();

    $(window).resize(function() {
      doResize = true;
    });
});

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

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

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