Certainly! Below is a basic example of how you can create a sticky header 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 id="header">
<h1>My Sticky Header</h1>
</header>
<div class="content">
<!-- Your content goes here -->
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS (styles.css):
```css
body {
margin: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 10px 20px;
position: fixed;
width: 100%;
top: 0;
z-index: 1000; /* Ensure header stays on top of other content */
}
.content {
padding-top: 70px; /* Adjust according to header height */
/* Other styles for your content */
}
```
JavaScript (script.js):
```javascript
// Add class to header when scrolling down to make it sticky
window.addEventListener('scroll', function() {
const header = document.getElementById('header');
if (window.scrollY > 50) {
header.classList.add('sticky');
} else {
header.classList.remove('sticky');
}
});
```
In this example, the header becomes sticky when the user scrolls down the page. You can adjust the scroll threshold and other styles according to your requirements.
