基於瀏覽器寬度的問題定位元素

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

    });