Diave Inoz Posted May 31, 2023 Share Posted May 31, 2023 (edited) Hi! I'm trying to make a webpage with a sticky "scroll to the top" button, and a sticky header. Instructions for something similar, except the header isn't sticky, are here...https://www.w3schools.com/howto/howto_js_scroll_to_top.asp Is there a way of making the header sticky that a novice can understand? Edited May 31, 2023 by Diave Inoz Link to comment Share on other sites More sharing options...
Ingolme Posted June 1, 2023 Share Posted June 1, 2023 CSS can do it, it's pretty simple. You can read about the CSS position:sticky; in this tutorial page: https://www.w3schools.com/css/css_positioning.asp Link to comment Share on other sites More sharing options...
Diave Inoz Posted June 10, 2023 Author Share Posted June 10, 2023 On 6/2/2023 at 2:13 AM, Ingolme said: CSS can do it, it's pretty simple. You can read about the CSS position:sticky; in this tutorial page: https://www.w3schools.com/css/css_positioning.asp Sorry for my late reply but I was expecting an email when when someone responded to my post. Regarding my problem...I saw the tag "<div class="fixed-header"> on another example of how to put a sticky header on a webpage, and that worked. I'm now having trouble with "jump to" links in the header not working properly, so that'll probably be another post for this forum. Link to comment Share on other sites More sharing options...
johnss Posted July 22 Share Posted July 22 To make a webpage header sticky, you can use CSS. Here’s a simple example of how to do it: 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</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header class="sticky-header"> <h1>My Sticky Header</h1> </header> <main> <p>Content goes here...</p> <!-- Add more content to make the page scrollable --> </main> </body> </html> CSS (styles.css) css body { margin: 0; font-family: Arial, sans-serif; } .sticky-header { position: -webkit-sticky; /* For Safari */ position: sticky; top: 0; background-color: #333; color: white; padding: 10px 0; text-align: center; z-index: 1000; /* Ensures the header stays above other content */ } main { padding: 20px; height: 2000px; /* Just for demonstration to make the page scrollable */ } Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now