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

Posted 2023-03-13

【中文标题】使用窗口调整大小缩放固定位置 div 的宽度

【英文标题】：Scaling the width of a fixed position div with window resize

【发布时间】：2013-11-24 07:49:08

【问题描述】：

这似乎是一个相当抽象的概念，但我会尽力解释它。

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 的位置吗？

【问题讨论】：

你为什么要减去一个字符串？并且您需要在每次调整大小事件时重新计算 sidecon。

为什么不减去一个字符串？基本上这是因为伪元素的宽度不变，我懒得把它放入变量中。

好吧，因为您不需要从数字中减去字符串。 :) 您可以简单地编写 sidecon - 24 没有类型转换，少 2 个字符的代码。

啊，真是的。谢谢。

【参考方案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);
);

);

【讨论】：

好吧，该死的。我怎么没想到呢？有时我是个智力懒惰的人。谢谢。