使用窗口調整大小縮放固定位置div的寬度

Question

這似乎是一個相當抽象的概念，但我會盡力解釋。

Div取決於窗口的滾動，從相對於固定的位置變為相對於絕對的位置，與此功能分開，但這僅是出於上下文考慮。

現在，網站具有響應能力，我希望在調整窗口大小時重新排列內容，包括固定位置的div。 但是在這里嘗試此功能后，我意識到我采用了錯誤的方法。

    $(document).ready(function () {

    var sidebarwidth = $(".sidebarholder").width();
        controlwidth = $(".loop-contain").outerWidth();
        innerwidth = $(".front-contain").outerWidth();
        //get side-contain width dynamically    
        //derivative variable   
            sidecon = (controlwidth - innerwidth);



    $(window).on('resize', function(){
         $('.side-contain').css({
            position: "fixed",
            left: sidebarwidth + innerwidth,
            top: "50px",
            width: sidecon - "24"

        });
        console.log (sidecon);
    });
});

我認為內容不會重排，因為它僅在頁面加載時計算變量。

有什么想法可以調整頁面大小時如何使固定位置div重排大小和位置？ 我一直在這個網頁上深入研究，但我什么都沒想。 奇怪的是，即使變量不斷變化，即使頁面一遍又一遍地調整，console.log仍將sidecon寬度顯示為初始寬度。 如果我要調整頁面大小，並且controlwdith和innerwidth都在更改，那是否不應該更改.side-contain的位置？

Answer 1

在resize事件中移動所有尺寸計算：

$(document).ready(function () {

$(window).on('resize', function(){

    var sidebarwidth = $(".sidebarholder").width();
        controlwidth = $(".loop-contain").outerWidth();
        innerwidth = $(".front-contain").outerWidth();
        //get side-contain width dynamically    
        //derivative variable   
        sidecon = (controlwidth - innerwidth);


     $('.side-contain').css({
        position: "fixed",
        left: sidebarwidth + innerwidth,
        top: "50px",
        width: sidecon - "24"

    });
    console.log (sidecon);
});

}）;