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. 如果左侧面板比视口大，则仅设置其位置。在这种情况下，将右面板的高度设置为与左面板相同，而不考虑其中的内容，并将其overflow css属性设置为auto。

真的很感激任何帮助。感谢。

Answer 1

你可以使用

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

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

Answer 2

如果您只想在用户滚动次数超过panelright且仅fixed大于120px时需要添加panelleft viewport 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>