Question posted in 
I have the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shrinking Header with Smooth Scroll</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, sans-serif;
}
.header {
background-color: #3498db;
color: white;
text-align: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 200px;
transition: height 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.header h1 {
margin: 0;
font-size: 2rem;
}
.content-wrapper {
padding-top: 200px; /* Start content below the header */
}
.content {
padding: 20px;
background-color: white;
}
.scroll-area {
height: 2000px; /* For scrollable space */
background-color: #f4f4f4;
}
</style>
</head>
<body>
<header class="header">
<h1>Shrinking Header</h1>
</header>
<div class="content-wrapper">
<div class="content">
<h2>Content Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nunc id aliquam tincidunt, nisl nunc tincidunt nunc, vitae aliquam nunc nunc vitae nunc. Sed euismod, nunc id aliquam tincidunt, nisl nunc tincidunt nunc, vitae aliquam nunc nunc vitae nunc.</p>
<!-- Add more content as needed -->
</div>
<div class="scroll-area"></div>
</div>
<script>
const header = document.querySelector('.header');
const contentWrapper = document.querySelector('.content-wrapper');
const minHeaderHeight = 200;
const maxHeaderHeight = 400;
let lastScrollTop = 0;
let currentPadding = maxHeaderHeight;
function easeOutCubic(t) {
return 1 - Math.pow(1 - t, 3);
}
function animateScroll() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const scrollDelta = scrollTop - lastScrollTop;
lastScrollTop = scrollTop;
const headerHeight = Math.max(maxHeaderHeight - scrollTop, minHeaderHeight);
header.style.height = headerHeight + 'px';
let targetPadding;
if (scrollTop < maxHeaderHeight - minHeaderHeight) {
// Increase padding to keep content in place
targetPadding = maxHeaderHeight + scrollTop;
} else {
// Once minimum header height is reached, fix padding
targetPadding = maxHeaderHeight + (maxHeaderHeight - minHeaderHeight);
}
// Use easing function for smoother transition
const easeFactor = easeOutCubic(0.3); // Increased factor for faster response
currentPadding += (targetPadding - currentPadding) * easeFactor;
contentWrapper.style.paddingTop = currentPadding + 'px';
requestAnimationFrame(animateScroll);
}
// Start the animation loop
requestAnimationFrame(animateScroll);
// Initial update on page load
window.addEventListener('load', () => {
contentWrapper.style.paddingTop = maxHeaderHeight + 'px';
});
</script>
</body>
</html>
So when I start scrolling, the header and the content (text under the header) is moving. And the content is moving under the header directly when start scrolling.
But I want now, that when I start scrolling, the header is collapsing at first to minimal height and the content is vertically under the header all the time and then after that, the content should scroll/move under the header, when I scroll further.
Is that possible?
I followed the guide in the link above and tried to develop it and I also researched for coding examples, but I found nothing.
Perhaps there is a (better) solution with ReactJS. I could also develop it in React.
2
Answers
You can achieve this by using position: sticky for your header.
Basically you have to remove position:fixed at some point (e.g when scrolled "shrink" amount of pixels)
As idea of
position:fixedis to keep item where it was while scroll