Sticky Docked Panel
Improve navigation accessibility. This script monitors the scroll position and fixes an element to the top of the viewport once it reaches the top edge.
Scroll down inside this box...
Keep scrolling...
I WILL STICK TO THE TOP
Content below header...
More content...
The header above should stick when it hits the top.
Lorem ipsum dolor sit amet.
Consectetur adipiscing elit.
Sed do eiusmod tempor.
Incididunt ut labore.
Et dolore magna aliqua.
Copy the Script
<style>
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
</style>
<script>
window.onscroll = function() { myFunction() };
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>Frequently Asked Questions
Yes! Modern CSS `position: sticky; top: 0;` is the preferred method today. This JavaScript version is useful for older browser support or complex logic (like resizing the header on scroll).
Yes. Sticky headers are very common on mobile to keep the menu accessible. Ensure the docked element isn't too tall, or it will cover the content.
The script automatically removes the 'sticky' CSS class when the user scrolls back up above the trigger point.