javascript - 2 带有动态内容滚动后固定右面板的面板布局

Question

我在创建有两个面板的布局时遇到问题，其中左侧面板具有相对定位，右侧面板仅在特定滚动后固定。另外，如果页面滚动到底部，我需要调整它的高度，以免与页 footer 分的右侧面板重叠。

到目前为止我已经完成了this , 但当内容在右侧刷新时，或者如果左侧面板的内容比右侧面板少，它会破坏高度计算。

jQuery

$(document).ready(function(){
	$(window).on('scroll',function(){
  	if($(window).scrollTop() > 120) {
    	$('.panelright').addClass('fixedpanel');
      
      
    }
     else
     	$('.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>

有几件事我想在这里做，但我没有可用的代码，只有上面分享的 fiddle 。

1. 在到达容器后或在特定滚动之后将右侧面板设置为固定定位。
2. 当它到达底部时更新它的高度，这样它就不会与页脚重叠。
3. 仅在左侧面板大于视口(viewport)时才将其位置固定。在这种情况下，无论其中的内容如何，​​都将右侧面板的高度设置为与左侧面板相同，并将其溢出 css 属性设置为自动。

非常感谢任何帮助。谢谢。

Answer 1

你可以直接使用

.panelleft, .panelright{
   margin-bottom:10px;

} 使用这个你的网格部分不会与页脚重叠。现在我只是解决与页脚重叠的问题。 看到你可以在页面滚动上应用高度，但我不认为这是一个正确的解决方案.. 如果您还有任何疑问，请发表评论，我会尽量缩短