Profile Completion 76%
Complete your profile so people can know more about you!
author
Hamza Waseem
GENERAL
Sure! Here's an example of a sticky header using HTML, CSS, and JavaScript:

HTML:
```html

<html>
<head>

</head>
<body>
<header class="sticky-header">

  • <a href="#">Home

  • <a href="#">About

  • <a href="#">Services

  • <a href="#">Contact



    • </header>





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

    CSS (styles.css):
    ```css
    .sticky-header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #f1f1f1;
    padding: 10px;
    z-index: 100;
    }

    .sticky-header nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
    }

    .sticky-header nav ul li {
    display: inline-block;
    }

    .sticky-header nav ul li a {
    text-decoration: none;
    color: #333;
    padding: 5px;
    }

    .content {
    margin-top: 100px; /* Adjust this value to prevent content from being overlapped by the sticky header */
    }
    ```

    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, the header with class "sticky-header" is set to be fixed at the top of the page using CSS. The JavaScript code adds a "sticky" class to the header when the user scrolls past its initial position, and removes the class when the user scrolls back up. The "content" class is used to add a margin to the content below the header, preventing it from being overlapped.
    0 0