0
我在創建佈局時遇到問題，其中有兩個面板與左側面板相對定位，右側面板僅在特定滾動後才固定。另外，如果頁面滾動到達底部而不與頁腳部分的右側面板重疊，則需要調整其高度。使用動態內容進行某些滾動後，固定右側面板的2個面板佈局
到目前爲止，我已經做了this，但它打破怎麼把它高度計算時的內容刷新在右手側，或者相比於右側面板左側面板有較小的內容。
jQuery的
$(document).ready(function(){
\t $(window).on('scroll',function(){
\t if($(window).scrollTop() > 120) {
\t $('.panelright').addClass('fixedpanel');
}
else
\t $('.panelright').removeClass('fixedpanel');
});
});header{
height: 100px;
border: 1px solid lightgray;
margin-bottom: 20px;
}
footer {
height:50px;
border: 1px solid lightgray;
clear:both;
margin-top: 20px;
}
.container {
width: 600px;
margin: 0 auto;
position: relative;
}
.panelleft, .panelright {
width: 45%;
float:left;
border: 1px solid lightgray;
position:relative;
display:block;
padding: 10px;
}
.fixedpanel {
position:fixed;
right:0px;
top: 10px;
bottom: 60px;
overflow: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<header></header>
<div class="container">
<div class="panelleft">
<p>
Lrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class="panelright">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
<footer></footer>
</div>有幾件事情想要做這裏，我沒有一個工作代碼，但只有我上面共享的小提琴。
- 要將右側面板設置爲固定定位後，它會在達到容器後進行特定的滾動。
- 當它到達底部時更新它的高度，使它不重疊頁腳。
- 只有當左側面板大於視口時才設置其位置。在這種情況下，將右側面板的高度設置爲與左側面板相同，而不考慮其中的內容，並將其溢出CSS屬性設置爲自動。
真的很感謝任何幫助。謝謝。
已經回答了這裏：https://stackoverflow.com/questions/15850271/how-to-make-div-fixed-after-you-scroll-to-that-div –
@ P.Iakovakis我的查詢那篇文章完全不同。我正在嘗試在滾動後修復右側面板，而不是導航欄。此外，問題m正在根據左側面板以及何時到達頁面底部來調整其高度。 – narcs