New Scroel

CSS (styles.css):

css

/* Styles for the sticky header */
.sticky-header {
position: fixed;
top: 0;
width: 100%;
background-color: #333; /* Change the background color to suit your design */
z-index: 1000; /* Ensure the header appears on top of other content */
}

/* Add more styles for your header, such as padding, text color, etc. */
.sticky-header ul {
list-style: none;
margin: 0;
padding: 0;
}

.sticky-header li {
display: inline;
margin-right: 20px;
}

.sticky-header a {
text-decoration: none;
color: white;
}

JavaScript (script.js):

javascript

// JavaScript to handle the sticky behavior
window.onscroll = function() {
const header = document.querySelector(‘.sticky-header’);

// Add the ‘sticky’ class to the header when you scroll to a certain position
if (window.pageYOffset > 100) { // Adjust 100 to the desired scroll position
header.classList.add(‘sticky’);
} else {
header.classList.remove(‘sticky’);
}
};

This code creates a simple webpage with a header that becomes sticky when the user scrolls past a certain point (in this case, 100 pixels). You can adjust the scroll position or modify the styles to fit your website’s design.