স্ক্রল পজিশন মনিটর করে জাভাস্ক্রিপ্ট দিয়ে হেডারের ফন্ট সাইজ বা প্যাডিং কমিয়ে স্টিকি হেডারকে কমপ্যাক্ট করা যায়।
উদাহরণ: স্ক্রলে হেডার সঙ্কুচিত
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 0px; padding: 0px;
height: 150vh;
}
.header {
position: fixed; top: 0; width: 100%;
background-color: rgb(52, 21, 110);
color: white; padding: 50px; font-size: 40px;
transition: 0.8s;
}
</style>
</head>
<body>
<div class="header">হেডার টেক্সট</div>
<p style="font-size: 35px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit vel dolore delectus esse consequatur at nulla, consequuntur sint quas ea. Incidunt, ex. Consequatur ipsa earum veritatis fugiat iusto, doloremque sunt beatae quaerat laboriosam nemo soluta quidem porro quia. Dolore reprehenderit cum voluptatibus eius assumenda ipsam tenetur asperiores magni aliquid eligendi doloribus quidem ipsa et praesentium provident molestias quaerat laboriosam, veniam aspernatur repellendus. Debitis sapiente, odit iste voluptatibus nesciunt veritatis incidunt mollitia nostrum, vitae suscipit iusto molestias consequuntur rem facere perspiciatis ad! Ratione reiciendis asperiores aperiam vitae facilis accusantium non aliquid, facere cupiditate reprehenderit tempore veritatis eum accusamus omnis tempora quos!
</p>
<script>
window.onscroll = function() { resizeHeader(); };
function resizeHeader() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.querySelector(".header").style.fontSize = "20px";
} else {
document.querySelector(".header").style.fontSize = "40px";
}
}
</script>
</body>
</html>
কোড ব্যাখ্যা
- position: fixed; top: 0: হেডার উপরে ফিক্সড।
- transition: 0.8s: ফন্ট সাইজ পরিবর্তন স্মুথ হবে।
- window.onscroll: স্ক্রল ইভেন্টে ফাংশন কল করে।
- scrollTop > 50: ৫০px স্ক্রল হলে ফন্ট ছোট হয়।
আধুনিক উন্নতি
`IntersectionObserver` API বা `window.scrollY` ব্যবহার করুন। ক্লাস টগল (`classList.toggle('shrunk')`) দিয়ে CSS-এ সব স্টাইল হ্যান্ডেল করুন ইনলাইন স্টাইল বদলে।
