2 面板布局与固定右面板后一些动态内容滚动

Question

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

到目前为止，我已经完成了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>

我在这里尝试做几件事，但我没有工作代码，但只有我在上面分享的小提琴。

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

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

Answer 1

你可以使用

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

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

Answer 2

如果您只想在用户滚动超过120px 并且仅当panelleft 大于viewport 时才创建panelright fixed，则需要向if 添加另一个条件

见下文或jsFiddle

$(document).ready(function() {
  $(window).on('scroll', function() {

    if ($(this).scrollTop() > 120 && $(this).height() < $('.panelleft').height()) {
      $('.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. 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>