
To create a sticky header/footer on a web page using HTML, CSS, and JavaScript, you can use the following steps:
1. Add the following HTML code to your web page:
<header>
<h1>This is the header</h1>
</header>
<main>
<p>This is the main content of the page.</p>
</main>
<footer>
<p>This is the footer</p>
</footer>
2. Add the following CSS code to your web page:
header {
position: sticky;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}
footer {
position: sticky;
bottom: 0;
left: 0;
width: 100%;
z-index: 1;
}
3. Add the following JavaScript code to your web page:
window.addEventListener(“scroll”, function() {
var header = document.querySelector(“header”);
var footer = document.querySelector(“footer”);
if (window.pageYOffset > 0) {
header.classList.add(“sticky”);
footer.classList.add(“sticky”);
} else {
header.classList.remove(“sticky”);
footer.classList.remove(“sticky”);
}
});
This will create a sticky header and footer on your web page. The header and footer will remain at the top and bottom of the page, respectively, even when the user scrolls down the page.
