0

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

提前感谢每一个人！

4

1 回答 1

0

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

请看看这个

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

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

于 2013-02-25T13:41:27.803 回答