I have a page with Hero section consisting of 2 columns - left one contains gallery slider, right one contains 2 blocks with text. The right one is longer but by design it should be 100% of the screen height. I have set fixed height for the hero and overflow-y: auto. One thing about the design is, that they require when scrolling while hovering over the left column, to scroll the text in the right one to its bottom to show the callout button first and then continue scrolling down the page. I tried to align the columns with flex, but wanted to make the left column sticky, so I swithced to floated elements. The only problem is that when I scroll to the bottom of the Hero section, I can't scroll further down the page. I need to move the mouse and then it "unlocks" scrolling down. I tried a couple of things with js for example - when reaching the bottom of the section on scroll - to trigger scrolling down but with no luck. The issue persists. I searched thoroughly the net, but couldn't find working solution. Does anyone have any suggestions?
.hero-header {
height: 100vh;
overflow-y: auto;
}
.hero-header:after{
content: '';
display: table;
clear: both;
width: 100%;
}
.main-slider {
max-width: 63%;
width: 63%;
float: left;
position: sticky;
top: 0;
}
.slide{
color: green;
font-weight: 700px;
text-align: center;
}
.main-slider_arrow{
cursor: pointer;
position: absolute;
z-index: 10;
visibility: hidden;
top: 37vh;
}
#hero-prev{
left: 20px;
}
#hero-next{
right: 20px;
}
.main-wrapper {
max-width: 37%;
width: 37%;
float: right;
}
.slider-gallery .slide {
padding: 8px;
height: calc(100vh - 61px);
position: relative;
margin-top: 61px;
@media screen and (max-width: 1024px) {
margin-top: unset;
}
}
.highlight-box{
height: 545px;
background-color: #da0f0d;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 102px;
color: white;
}
.text-container{
margin-bottom: 20px;
}
.btn{
min-width: 200px;
padding: 10px 15px;
text-align: center;
text-transform: uppercase;
background: black;
color: white;
}
.section{
text-align: center;
background: skyblue;
padding: 80px 100px;
min-height: 700px;
}<div class="hero-header">
<div class="main-slider">
<div class="main-slider_arrow" id="hero-prev">
Prev
</div>
<div class="slider-col">
<div class="slider-gallery">
<div class="slide">
#slide1
</div>
</div>
</div>
<div class="main-slider_arrow" id="hero-next">
Next
</div>
</div>
<div class="main-wrapper">
<div class="highlight-box">
<div class="highlight-box_heading">Title</div>
<div class="highlight-box_rating">
<img src="./icons/star.svg" />
<img src="./icons/star.svg" />
<img src="./icons/star.svg" />
<img src="./icons/star.svg" />
<img src="./icons/star.svg" />
<span class="highlight-box_rating-number">5/5</span>
</div>
<div class="highlight-box_description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, culpa!
</div>
<div class="highlight-box_actions">
<a class="actions_link" href="#"> Discover More </a>
</div>
</div>
<div class="main-options">
<div class="text-container">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum aliquam magni accusamus ex voluptatum distinctio itaque laudantium eos praesentium tempore corporis saepe corrupti, illum at, voluptate eligendi rerum. Repellat explicabo quod obcaecati perspiciatis dolore beatae vitae maiores ad tempora. Nemo deserunt tempora necessitatibus dolorum! Possimus omnis saepe harum corporis iste?
</div>
<div class="text-container">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum aliquam magni accusamus ex voluptatum distinctio itaque laudantium eos praesentium tempore corporis saepe corrupti, illum at, voluptate eligendi rerum. Repellat explicabo quod obcaecati perspiciatis dolore beatae vitae maiores ad tempora. Nemo deserunt tempora necessitatibus dolorum! Possimus omnis saepe harum corporis iste?
</div>
<div class="text-container">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum aliquam magni accusamus ex voluptatum distinctio itaque laudantium eos praesentium tempore corporis saepe corrupti, illum at, voluptate eligendi rerum. Repellat explicabo quod obcaecati perspiciatis dolore beatae vitae maiores ad tempora. Nemo deserunt tempora necessitatibus dolorum! Possimus omnis saepe harum corporis iste?
</div>
<div class="text-container">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum aliquam magni accusamus ex voluptatum distinctio itaque laudantium eos praesentium tempore corporis saepe corrupti, illum at, voluptate eligendi rerum. Repellat explicabo quod obcaecati perspiciatis dolore beatae vitae maiores ad tempora. Nemo deserunt tempora necessitatibus dolorum! Possimus omnis saepe harum corporis iste?
</div>
<div class="text-container">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum aliquam magni accusamus ex voluptatum distinctio itaque laudantium eos praesentium tempore corporis saepe corrupti, illum at, voluptate eligendi rerum. Repellat explicabo quod obcaecati perspiciatis dolore beatae vitae maiores ad tempora. Nemo deserunt tempora necessitatibus dolorum! Possimus omnis saepe harum corporis iste?
</div>
<a hrev="#" class="btn">CALLOUT BTN</a>
</div>
</div>
</div>
<section class="section">
<p>NEXT SECTION</p>
</section>