jquery - 通过调整窗口大小来缩放固定位置 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 将侧边宽度显示为初始宽度，即使页面一遍又一遍地调整大小，尽管变量正在发生变化。如果我调整页面大小并且 controlwdith 和 insidewidth 发生变化，那么不应该改变 .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);
});

});