I am facing difficulty in designing a layout with two panels where the left panel has relative positioning and the right panel becomes fixed only after a specific scroll point. Additionally, I need the height of the right panel to adjust when the page scroll reaches the bottom to prevent overlapping with the footer section.
https://i.sstatic.net/WS8tK.png
My current progress can be viewed here, but it breaks when the height calculation is affected by content updates on the right side or if the left panel has less content compared to the right panel.
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>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 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>I'm trying to achieve a few things here without success, for which I have included a reference fiddle above.
- Set the right panel to a fixed position after reaching a specific scroll point within its container.
- Adjust its height dynamically so that it does not overlap with the footer when reaching the bottom.
- Only fix its position when the left panel exceeds the viewport height. In this case, set the height of the right panel equal to the left panel regardless of its content, and apply overflow CSS property as auto.
Your help in resolving these issues would be greatly appreciated. Thank you.