增加宽度时 resize() 函数的问题答案

【问题标题】：issue with resize() function, when growing widths增加宽度时 resize() 函数的问题
【发布时间】：2013-02-25 13:23:40
【问题描述】：

我在窗口右侧有一个固定的 div，我想要做的是当用户调整窗口大小时，我希望这个固定的 div 通过改变它的位置不与另一个 div 重叠，我设法做到了将大小调整为更小，但我想要的是，当用户还调整窗口大小以获得更高的宽度时，我希望该 div 回到最初的“固定”状态。

这是代码示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $(window).resize(function(){
        var pos = $("#div").offset();
        var fix = $("#fix").offset();
        if(fix.left<950){
            $('#fix').css('position','relative');
            $('#fix').css('left',fix.left);
            $('#fix').css('top',-fix.top);
            var available = true;
        }
        var pos = $("div").offset();
        var fix = $("fix").offset();
        if(fix.left>950){
            $('#fix').css('position','fixed');
            $('#fix').css('right','100px');
            $('#fix').css('top',fix.top);
        }
    });

});
</script>
</head>

<body style="margin:0;">
<div id="div" style="width:600px; height:200px; background-color:red; margin-left:300px;"></div>
<div id="fix" style="position:fixed; right:100px; height:100px; width:100px; background-color:yellow; top:100px;"></div>
</body>
</html>

提前谢谢大家！

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

正如我所见，当您的窗口调整到小于固定值或调整到大于相同值时，就会发生操作对于响应式/自适应网页设计，我会建议您使用 CSS3 媒体查询而不是脚本。

请看this

这些处理量不大，因此重量轻且大多数现代浏览器和设备都支持 CSS3，因此是一个方便可靠的选项。

此外，如果您针对旧浏览器并需要显示圆角或旧浏览器不支持的其他 css3 属性，您可以查看链接上的 CSS3 PIE：css3pie.com

【讨论】：

我很抱歉，但我什至没有提到我的目标是边界或其他东西.. 我希望固定的 DIV 在特定的“左”值处变得相对，并且相同的 DIV 变得固定在特定的“左”值上
边界和阴影与答案无关。只是一些额外的信息。但是 Css3 响应式设计是我希望你看到的。