窗口上的jQuery调整大小

Question

窗口上的jQuery调整大小

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

有任何想法吗？

Answer 1

将您的javascript移动到一个函数中，然后将该函数绑定到窗口调整大小。$(document).ready(function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;updateContainer(); &nbsp;&nbsp;&nbsp;&nbsp;$(window).resize(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;updateContainer(); &nbsp;&nbsp;&nbsp;&nbsp;});});function&nbsp;updateContainer()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;$containerHeight&nbsp;=&nbsp;$(window).height(); &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;($containerHeight&nbsp;<=&nbsp;818)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('.footer').css({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;'static', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bottom:&nbsp;'auto', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;'auto' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;($containerHeight&nbsp;>&nbsp;819)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('.footer').css({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;'absolute', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bottom:&nbsp;'3px', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;'0px' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;}}

Answer 2

jQuery有一个resize事件处理程序，你可以将它附加到窗口，.resize（）。因此，如果您放置，$(window).resize(function(){/* YOUR CODE HERE */})那么每次调整窗口大小时都会运行您的代码。所以，你想要的是在第一次加载页面后以及调整窗口大小时运行代码。因此，您应该将代码拉入自己的函数并在两个实例中运行该函数。// This function positions the footer based on window sizefunction 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});