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

Question

我有一个固定的位置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);

但它似乎没有做任何事情。 我将left = 500px设置为一个简单的测试，以使javascript正常工作，然后我担心要在哪里放置它。

我已经做了一些谷歌搜索，从我可以告诉它应该工作，我想念什么？

如果有办法清除左侧位置，我也想知道。

Answer 1

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);

Answer 2

@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();
       });

    });