当宽度增加时，resize()函数出现问题

Question

我在窗口的右边有一个固定的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>

提前感谢每一个人！

Answer 1

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

请看一下this

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

此外，如果您的目标是旧浏览器，并且需要显示圆角或其他旧浏览器不支持的css3属性，您可以查看链接上的CSS3饼: css3pie.com