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