問題與調整大小（）函數，當增長寬度

我有一個固定的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>

感謝每一個在前進！

來源

2013-02-25 Mahmoud Jabado

，我可以看到的是，行動發生時，你的窗口大小調整爲小於固定值或調整到大於相同的值，因此我會建議你使用CSS3媒體查詢，而不是腳本的響應/自適應網頁設計。

請看看this

這些不處理很多，因此重量輕，最現代的瀏覽器和設備支持CSS3因此一個方便，可靠的選擇。

此外，如果你的目標舊的瀏覽器，並需要出示圓角或其它CSS3屬性不老的瀏覽器支持你可以看看鏈路上的CSS3 PIE：css3pie.com

來源

2013-02-25 13:41:27

我很抱歉，但我甚至沒有提到我的目標是邊界或其他東西..我希望固定的DIV變成相對於特定的「左」值，並且相同的DIV變成固定在特定的「左」值上 – 2013-02-25 14:39:29

邊界和角落沒有任何東西用答案做。只是一些額外的信息。但是Css3響應式設計是我希望你看到的。 – 2013-02-25 15:21:04

問題與調整大小（）函數，當增長寬度

回答

相關問題