基于浏览器宽度定位元素的问题

时间:2013-08-09 18:08:22

标签: javascript css-position

我有一个固定的位置div我希望左侧位置:当浏览器窗口小于1200px时为0,但是当大于1200px时没有左侧定位。我正在使用此代码

var $window = $(window);
function checkWidth() {
    var windowsize = $window.width();
    document.write(windowsize);
    if (windowsize < 1200) {
        document.getElementById("DBCIbox").style.left = "0";
    } else {50
        document.getElementById("DBCIbox").style.left = "500px";
    }
}
checkWidth();
$(window).resize(checkWidth);

但它似乎没有做任何事情。我设置左= 500px只是一个测试,以使javascript工作,然后我会担心我想在哪里定位它。

我做了一些googleing,从我能说的这应该有用,我错过了什么?

如果这是一种清除左侧定位的方法,我也想知道。

2 个答案:

答案 0 :(得分:0)

var $window = $(window);

该行正在缓存该窗口实例。每次调用此代码以获取更新的宽度和高度值时,都需要重新评估$(window)

更新了以下代码

function checkWidth() {
    var $window = $(window);
    var windowsize = $window.width();
    document.write(windowsize);
    if (windowsize < 1200) {
        document.getElementById("DBCIbox").style.left = "0";
    } else {50
        document.getElementById("DBCIbox").style.left = "500px";
    }
}

checkWidth();

$(window).resize(checkWidth);

答案 1 :(得分:0)

@Jnatalzia说得对,我需要做一些调整,评论不会让我发布代码,但是@Jnatalzia可以归功于答案。

   function checkWidth() {
        var $window = $(window);
        var windowsize = $window.width();
        var position;       
        if (windowsize < 1390) {
            document.getElementById("DBCIbox").style.marginLeft = 0 + "px";
        } else if (windowsize >= 1390) {
            position = windowsize - 1060;
        position = position / 2;
        position = position - 175;
            document.getElementById("DBCIbox").style.marginLeft = position + "px";
        }
    }

    $("document").ready(function(){

       $(window).load(function(){
          checkWidth();
       });

       $(window).resize(function(){
          checkWidth();
       });

    });