Sample code snippet of a website's sticky header in Html, CSS and JavaScript

0

Sample code snippet of a website's sticky header in Html, CSS and JavaScript

Here's a simple example of creating a website's sticky header using HTML, CSS, and JavaScript. 

This code creates a sticky header that becomes fixed at the top of the page when you scroll down. Adjust styles and structure to fit your website's design.

 

HTML:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="styles.css">

  <title>Sticky Header Example</title>

</head>

<body>

  <header id="myHeader">

    <h1>Your Website</h1>

  </header>

  <!-- Rest of your website content goes here -->

 

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

</body>

</html>

 

 

CSS (styles.css):

body {

  margin: 0;

  font-family: 'Arial', sans-serif;

}

 

header {

  background-color: #333;

  color: white;

  text-align: center;

  padding: 10px;

}

 

/* Add some space for the content to prevent it from being hidden behind the sticky header */

body {

  padding-top: 60px;

}

 

JavaScript (script.js):

document.addEventListener("DOMContentLoaded", function () {

  var header = document.getElementById("myHeader");

  var sticky = header.offsetTop;

 

  function handleScroll() {

    if (window.pageYOffset > sticky) {

      header.classList.add("sticky");

    } else {

      header.classList.remove("sticky");

    }

  }

 

  window.onscroll = function () {

    handleScroll();

  };

});

 

CSS (styles.css) for sticky behavior:

/* Add this at the end of styles.css */

 

.sticky {

  position: fixed;

  top: 0;

  width: 100%;

  z-index: 1000;

}

Post a Comment

0Comments

Post a Comment (0)