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 Media 查询而不是脚本来执行响应式/自适应网页设计。

请查看this

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

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

当增加宽度时，调整resize（）函数的问题

1 个答案: