首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >调整窗口大小时使用jQuery

调整窗口大小时使用jQuery
EN

Stack Overflow用户
提问于 2012-03-23 03:04:37
回答 6查看 551.3K关注 0票数 222

我有以下JQuery代码:

代码语言:javascript
复制
$(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

有什么想法吗?

EN

回答 6

Stack Overflow用户

发布于 2012-03-23 03:06:24

将javascript移动到一个函数中,然后将该函数绑定到窗口大小调整。

代码语言: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'
        });
    }
}
票数 63
EN

Stack Overflow用户

发布于 2015-09-04 16:43:32

尝试此解决方案。仅在页面加载后,在以预定义的resizeDelay调整窗口大小时激发。

代码语言:javascript
复制
$(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;
    });
});
票数 14
EN

Stack Overflow用户

发布于 2012-03-23 03:06:55

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

代码语言:javascript
复制
$(window).on("resize", doResize);

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

票数 6
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9828831

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档