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

什么好主意吗?


当前回答

试试这个解决方案。仅在页面加载时触发,然后在窗口调整大小期间在预定义的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;
    });
});

其他回答

将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/

function myResizeFunction() {
  ...
}

$(function() {
  $(window).resize(myResizeFunction).trigger('resize');
});

这将导致调整大小处理程序在窗口调整大小和文档准备就绪时触发。当然,如果你想让.trigger('resize')在页面加载时运行,你可以将你的resize处理程序附加到文档就绪处理程序之外。

更新:如果您不想使用任何其他第三方库,这里有另一个选择。

该技术将一个特定的类添加到目标元素中,这样您就可以仅通过CSS控制样式(并避免内联样式)。

它还确保只在触发实际阈值点时添加或删除类,而不是在每次调整大小时添加或删除类。它只会在一个阈值点触发:当高度从<= 818变化到> 819时,反之亦然,并且不会在每个区域内多次触发。它与宽度的变化无关。

function myResizeFunction() {
  var $window = $(this),
      height = Math.ceil($window.height()),
      previousHeight = $window.data('previousHeight');

  if (height !== previousHeight) {
    if (height < 819)
      previousHeight >= 819 && $('.footer').removeClass('hgte819');
    else if (!previousHeight || previousHeight < 819)
      $('.footer').addClass('hgte819');

    $window.data('previousHeight', height);
  }
}

$(function() {
  $(window).on('resize.optionalNamespace', myResizeFunction).triggerHandler('resize.optionalNamespace');
});

例如,你可能有以下一些CSS规则:

.footer {
  bottom: auto;
  left: auto;
  position: static;
}

.footer.hgte819 {
  bottom: 3px;
  left: 0;
  position: absolute;
}

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