Certainly! Here's a basic example of how you can create a sticky header for a website using HTML, CSS, and JavaScript:
HTML:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Header</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="sticky-header">
<h1>My Sticky Header</h1>
</header>
<main>
<!-- Your website content goes here -->
</main>
<script src="script.js"></script>
</body>
</html>
```
CSS (styles.css):
```css
body {
margin: 0;
font-family: Arial, sans-serif;
}
.sticky-header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
position: fixed;
top: 0;
width: 100%;
z-index: 1000; /* To make sure the header stays on top */
}
/* Placeholder styles for main content */
main {
padding: 20px;
margin-top: 80px; /* Adjust according to header height */
}
```
JavaScript (script.js):
```javascript
window.onscroll = function() {stickyHeader()};
var header = document.querySelector('.sticky-header');
var sticky = header.offsetTop;
function stickyHeader() {
if (window.pageYOffset > sticky) {
header.classList.add('sticky');
} else {
header.classList.remove('sticky');
}
}
```
In this example:
- We create a basic HTML structure with a `<header>` for the sticky header and a `<main>` for the website content.
- CSS is used to style the header and create a basic layout. The `.sticky-header` class has `position: fixed` to make it stick to the top of the viewport.
- JavaScript is used to add a `sticky` class to the header when the user scrolls past a certain point (`offsetTop` of the header), and remove it when they scroll back up. This `sticky` class can be used to apply additional styling if needed.
Make sure to adjust styles and JavaScript logic according to your specific design and requirements.
