Html

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 Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="sticky-header">
        <h1>My Sticky Header</h1>
    </header>
    
    <div class="content">
        <!-- Your website content goes here -->
    </div>

    <script src="script.js"></script>
</body>
</html>

CSS (styles.css):

css
body {
    font-family: Arial, sans-serif;
    margin: 0;
}

.sticky-header {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}

.content {
    padding: 50px 20px; /* Adjust padding to prevent content from being covered by the header */
}

JavaScript (script.js):

javascript
document.addEventListener("DOMContentLoaded", function() {
    var header = document.querySelector('.sticky-header');
    var headerHeight = header.offsetHeight;

    window.addEventListener('scroll', function() {
        if (window.pageYOffset > headerHeight) {
            header.classList.add('fixed');
        } else {
            header.classList.remove('fixed');
        }
    });
});

Explanation:

The HTML file contains a basic structure with a header and content section.
The CSS file (styles.css) styles the header and sets its position to fixed.
The JavaScript file (script.js) adds a class called 'fixed' to the header when the user scrolls down the page beyond the height of the header.

Make sure to adjust the class names, styles, and content according to your specific needs. This code provides a basic framework for a sticky header, but you may need to further customize it depending on your website's design and requirements.

यह ब्लॉग खोजें

Future is 10 work

Html

Certainly! Here's an example of HTML, CSS, and JavaScript code for a website with a sticky header:

टिप्पणियाँ

एक टिप्पणी भेजें