When scrolling the main content, it goes up behind the header as standard. I was wondering if it’s possible to be cut off a bit before scrolling directly into the header and to maintain its border radius while scrolling. I’ve animated an example of what I’m trying to do here:
Attempt 1 (snippet coming soon)
Overflow box
I’ve tried putting the content into a scrollable box in which the content overflows the box but you have to put your mouse inside the box in order for it to scroll. I wanted it to scroll as a normal page would so I added JavaScript to make it scrollable from any mouse position. Although it did work, the scrolling gets jittery sometimes because of the script so I’m looking to see if there’s a different approach I don’t know.
Attempt 2 (has snippet)
Masking a photo of the background image on top of the content
The second thing I tried was masking the same image used for the background on top of the main content. I translated this image upwards based on the current scroll position after the header sticks to the top of the viewport along with an initial translation to get it to line up with the background. It works fairly well but it flickers a bit on the initial page load and the image's Y translation freaks out if I scroll way too fast.
I'm using a different image than the one in the video example I made just as a placeholder while I figure things out.
window.addEventListener('DOMContentLoaded', function() {
var initialTranslateY = -247; // Change to positive value for upward translation
document.querySelector('.grid-item4 .bg-img').style.transform = 'translateY(' + initialTranslateY + 'px)';
var lastValidScrollPosition = 0; // Store the last valid scroll position
var isInitialPosition = true; // Flag to track if scroll position is less than 200 pixels
function updateTranslation(scrollPosition) {
// Check if scroll position is within valid range
if (scrollPosition >= 0 && scrollPosition <= document.documentElement.scrollHeight - window.innerHeight) {
lastValidScrollPosition = scrollPosition; // Update the last valid scroll position
if (scrollPosition >= 200 || isInitialPosition) {
isInitialPosition = false; // Update the flag
var additionalTranslateY = scrollPosition - 200;
var totalTranslateY = initialTranslateY - additionalTranslateY; // Subtract additionalTranslateY
document.querySelector('.grid-item4 .bg-img').style.transform = 'translateY(' + totalTranslateY + 'px)';
} else {
// If scroll position is 199 or less, set translation to -247px
document.querySelector('.grid-item4 .bg-img').style.transform = 'translateY(' + initialTranslateY + 'px)';
}
} else if (scrollPosition < 0) {
// If scroll position is negative, set translation to -247px
document.querySelector('.grid-item4 .bg-img').style.transform = 'translateY(' + initialTranslateY + 'px)';
} else {
// Use the last valid scroll position
var additionalTranslateY = lastValidScrollPosition - 200;
var totalTranslateY = initialTranslateY - additionalTranslateY; // Subtract additionalTranslateY
document.querySelector('.grid-item4 .bg-img').style.transform = 'translateY(' + totalTranslateY + 'px)';
}
}
window.addEventListener('scroll', function() {
var scrollPosition = window.scrollY;
// Request animation frame only if it's not already requested
window.requestAnimationFrame(function() {
updateTranslation(scrollPosition);
});
});
});/* Resetting default margin and padding */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body styles */
body {
font-family: Arial, sans-serif;
line-height: 2;
}
.bg-img {
width: 100%;
}
.container {
display: grid;
}
.container>* {
background-color: rgba(255, 255, 255, 0.565);
}
.grid-item1 {
grid-area: 1 / 1 / 5 / 1;
overflow: hidden;
}
.grid-item2 {
grid-area: 1 / 1 / 1 / 1;
height: 200px;
}
.grid-item3 {
grid-area: 2 / 1 / 2 / 1;
position: sticky;
top: 0;
height: 80px;
background-color: white;
}
.grid-item4 {
overflow: hidden;
height: 40px;
}
.grid-item5 {
grid-area: 4 / 1 / 4 / 1;
width: 40%;
justify-self: center;
/* Center the item horizontally */
}<div class="container">
<div class="grid-item1">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/79527594_9gshrOpBtFw5pjV.png" class="bg-img">
</div>
<div class="grid-item2">
<p>Banner</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="grid-item3">
<h2>Header</h2>
<div class="grid-item4">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/79527594_9gshrOpBtFw5pjV.png" class="bg-img">
</div>
</div>
<div class="grid-item5">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>