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 reflow它的大小和位置作为页面调整大小？我已经在这个网站上深入挖掘，我无法想出任何东西。奇怪的是，尽管变量正在发生变化，但即使页面一次又一次地调整大小，console.log也会将sidecon宽度显示为初始宽度。如果我正在调整页面大小并且controlwdith和innerwidth正在发生变化，那么不应该改变.side-contains的位置吗？

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

}）;

使用窗口调整大小来缩放固定位置div的宽度

1 个答案: