固定位置相對於家長Div與滑動邊欄

我想我的側邊欄打開時推內容，我有achived，但我的固定導航停留在左：0px的位置;相對於veiwport而不是相對定位的父元素。我的資產淨值與100％固定位置相對於家長Div與滑動邊欄

我的側邊欄工作正常，在Firefox，但跳出父母的鉻

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Test Page</title> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
</head> 

<body> 
    <div id="sidebar"> 

    </div> 

    <div class="content"> 
     <div id="nav"> 
      <p class="button"></p>  
     </div> 
    </div> 

<script type="text/javascript"> 

    $('.button').click(function(){ 
     $('.content').toggleClass('slide'); 
     }); 

</script> 

</body> 
</html>

我的CSS

@font-face { 
    font-family: 'icomoon'; 
    src:url('fonts/icomoon.eot'); 
    src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), 
     url('fonts/icomoon.woff') format('woff'), 
     url('fonts/icomoon.ttf') format('truetype'), 
     url('fonts/icomoon.svg#icomoon') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

*{ 
    margin: 0; 
    padding: 0; 
} 

#sidebar{ 
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 250px; 
    background: rgb(60,60,60); 
    float:left; 
    height: 600px; 
    z-index: -1; 
} 

.content{ 
    position: relative; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height:600px; 
    background: #FFF; 
    -moz-transition:all 0.4s ease-in-out; 
    -webkit-transition:all 0.4s ease-in-out; 
} 

.slide{ 
    left: 250px; 
} 

#nav{ 
    position: fixed; 
    top: 0; 
    background: #0af; 
    width: 100%; 
    box-shadow: 1px 1px #ddd; 
} 

#nav p:before{ 
    content: "\e000"; 
} 

.button{ 
    font-family: 'icomoon'; 
    font-size: 2em; 
    color: #FFF; 
    cursor: pointer; 
    margin: 10px; 
}

VIEW HERE

來源

2013-05-21 aztekgold

添加position: absolute;至.slide{...}個CSS將解決在Chrome中的問題，你可能還需要修復時，動畫類.slide去除

好運

[更新] 這裏是一個工作示例：http://jsfiddle.net/QdVKD/1/

固定WIDTH和UNNEEDED滾動頁：http://jsfiddle.net/QdVKD/2/

來源

2013-05-21 21:08:32

謝謝！我將如何修復動畫？ – aztekgold

我可以通過將nav的左值設置爲繼承來創建相同的效果，而無需更改動畫，但我希望能夠滾動查看頁面的其餘部分。 – aztekgold

這很容易，通過爲nav添加相同的樣式，和滑塊檢查這個小提琴http://jsfiddle.net/QdVKD/1/ –

固定位置相對於家長Div與滑動邊欄

回答

相關問題