<header class="entry-header">
<div class="right-side">
<h1 class="entry-title">Desk</h1><p>$99</p><p>500x200x600</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent molestie velit erat, nec porta diam fringilla vel. Nunc id euismod purus. Sed enim tellus, auctor a tempor eget, mattis sit amet massa. Etiam imperdiet elit eu faucibus vestibulum. Fusce ultrices ex quis turpis vulputate vehicula. Nulla laoreet vulputate nunc ac pretium. Pellentesque ac velit nec quam rhoncus sagittis eget porttitor lectus. Curabitur egestas vehicula lacinia. Proin ullamcorper, orci id dapibus viverra, libero ex imperdiet ex, quis lacinia dui dui vel est. Quisque condimentum nulla non elit rutrum, non mollis enim volutpat. Vestibulum mattis at magna sed porta. Cras venenatis ex dignissim nisl facilisis maximus. Integer efficitur vel augue vitae consequat. Sed ac fermentum lacus. Nulla facilisi.</p>
<div class="before">
<p>Before:</p>
<img class="beforeimage" src="img.jpg" alt="" />
</div><!-- end before -->
</div><!--end right-side-->
<!--repeater field-->
<div class="left-side">
<ul class="slides">
<li class="slide">
<img src="img1.jpg" alt="Featured Desk">
</li>
<li class="slide">
<img src="img2.jpg" alt="Featured Desk">
</li>
<li class="slide">
<img src="img3.jpg" alt="">
</li>
<li class="slide">
<img src="img4.jpg" alt="">
</li>
<li class="slide">
<img src="img5" alt="">
</li>
</ul>
</div><!-- end left-side -->
<!--end single furniture repeater-->
</header><!-- .entry-header -->My page is split in half. The div encompassing the left side is position static. The div encompassing right side content is position fixed. The problem I am having is, when I reduce the screen width, the fixed position right side overlaps into the footer. There is also a div surround both left and right side. I appreciate any answer/suggestions! Let me know if more context is needed.
.left-side {
display: flex;
flex-direction: column;
width: 50%;
}
.right-side {
display: flex;
flex-direction: column;
margin-left: 50%;
position: fixed;
margin-right: $main-side-margins;
}I added some JavaScript to solve my problem. I also had to use jQuery Waypoint. What the JavaScript code does, is triggers a new class that makes the right-side div "position: static" once the bottom of the left-side div comes into the window view. This prevents the right side from ever going lower than the left side, thus, preventing overlap into the footer. I've attached the JS code and some new CSS.
.right-side-to-static {
position: static !important;
margin-top: 115%;
@media only screen and (max-width: 1370px) {
margin-top: 100%;
}
@media only screen and (max-width: 1140px) {
margin-top: 75%;
}
@media only screen and (max-width: 890px) {
margin-top: 50%;
}
@media only screen and (max-width: 820px) {
margin-top: 40%;
}
@media only screen and (max-width: 730px) {
display: none;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
const $rs = $('.right-side');
const $ls = $('.left-side');
let rsHeight = $('.right-side').height();
let lsHeight = $('.left-side').height();
let counter = 0;
console.log(rsHeight);
$ls.waypoint(function(direction){
counter++
if(counter > 2){
console.log('bottom in view...');
$rs.toggleClass('right-side-to-static');
}
},{
//bottom-in-view will ensure event is thrown when the element's bottom crosses
//bottom of viewport.
offset: 'bottom-in-view'
});Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments