Untitled
unknown
plain_text
a year ago
1.4 kB
4
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { margin: 0; font-family: Arial, sans-serif; } header { background-color: #333; padding: 10px; color: white; text-align: center; position: fixed; width: 100%; top: 0; transition: top 0.3s; } section { padding: 50px 20px; margin-top: 60px; /* Adjust margin to accommodate the fixed header */ } </style> </head> <body> <header id="myHeader"> <h1>Sticky Header</h1> </header> <section> <h2>Scroll down to see the effect</h2> <!-- Your website content goes here --> </section> <script> window.onscroll = function() { scrollFunction(); }; function scrollFunction() { if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) { document.getElementById("myHeader").style.top = "0"; } else { document.getElementById("myHeader").style.top = "-60px"; // Adjust the negative top value to hide the header } } </script> </body> </html>
Editor is loading...
Leave a Comment