My webpage features a Hero section with 2 columns - the left column contains a gallery slider, and the right column consists of 2 text blocks. The challenge here is that the right column needs to be 100% of the screen height while scrolling. To achieve this, I set a fixed height for the hero section and added overflow-y: auto. An interesting design requirement is that when you scroll while hovering over the left column, the text in the right column should scroll down to reveal a callout button at the bottom before continuing to scroll down the page. I initially tried aligning the columns using flex but encountered issues with making the left column sticky, so I switched to floated elements. However, I faced a problem where once I reach the bottom of the Hero section, I can't further scroll down the page unless I move my mouse, which seems to unlock the scrolling feature. I attempted various JavaScript solutions, like triggering auto-scrolling down upon reaching the bottom of the section, but nothing worked. I searched extensively online for a solution but couldn't find one. Does anyone have any suggestions?
.hero-header {
height: 100vh;
overflow-y: auto;
}
(hero header styles continue...)