一個固定的div，保持其父寬度？

Question

這裏是我的主頁的簡化版本：

<div class="main"> 
    <div class="content"> all the content of my website </div> 
    <div class="nav"> fixed on the screen and always visible </div> 
</div> 

而這裏的相應的CSS：

.main { 
    max-width: 500px; 
    height: 2000px; 
    margin: auto; 
    background-color: grey; 
} 

.nav { 
    width: 100px; 
    height: 100px; 
    background-color: blue; 
    position:fixed; 
    right: 0; /* that's the issue */ 
} 

我想作爲固定要素留在它的父（觸摸其父的右邊緣）。但現在它正在觸摸屏幕的右邊界。

任何想法如何解決這個問題？謝謝！

Answer 1

您可以添加一個附加項目，以模擬主容器的屬性，嘗試這樣的：

.main { 
 
    max-width: 500px; 
 
    height: 2000px; 
 
    margin: auto; 
 
    background-color: grey; 
 
} 
 
.nav { 
 
    position:fixed; 
 
    max-width:500px; 
 
    width:100%; 
 
} 
 
.nav > div{ 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: blue; 
 
    float:right; 
 
}

<div class="main"> 
 
    <div class="content">all the content of my website</div> 
 
    <div class="nav"><div>fixed on the screen and always visible</div></div> 
 
</div>

Answer 2

position: fixed被描述爲「元素相對於瀏覽器窗口定位」。您可以使用JavaScript來實現這種效果，這裏是你如何用jQuery做到這一點，例如：

$(window).scroll(function() { 
 
      var y = $(window).scrollTop(); 
 
      $(".nav").css('top', y); 
 
});

.main { 
 
    max-width: 500px; 
 
    height: 4000px; 
 
    margin: auto; 
 
    background-color: grey; 
 
    position: relative; 
 
} 
 

 
.nav { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    position: absolute; 
 
    right: 0; /* that's the issue */ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <div class="content"> parent </div> 
 
    <div class="nav"> fixed to parent width </div> 
 
</div>