How to fix the menu at a distance of 100px

[ToitenAn]

Select Topic Area

Question

Body

How to fix the menu at a distance of 100px from the top of the page, if it's more than 100px, it will be hidden( html,css and JS) pls

[bug3]

Hello @ToitenAn Can you share the image or codes of the menu?

[amankr1469]

Define the styles for your menu and content. For the menu, set it to have a fixed position, 100px from the top, with a background color, padding, and z-index to ensure it's always visible. Also, add styles for the menu items (like links). For the content, make sure it has enough padding at the top to prevent it from being covered by the menu.
Write a JavaScript function that listens for the scroll event on the window. When the user scrolls, check the current vertical scroll position. If it's greater than 100px, change the menu's top position to 0px, effectively sticking it to the top of the page. If the scroll position is less than or equal to 100px, set the menu's top position back to 100px, making it visible at its original position.

[UdaySMukherjee]

HTML (index.html):
Create a new file named index.html and copy the HTML content into it.

<title>Fixed Menu Example</title>

• Home
• About
• Contact

<!-- Your page content goes here -->
<div id="content">
    <!-- ... -->
</div>

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

CSS (styles.css): Create a new file named styles.css and copy the CSS content into it.

/* styles.css */
body {
margin: 0;
padding: 0;
}

#fixed-header {
position: fixed;
top: -100px; /* Initially hide the menu above the viewport /
left: 0;
width: 100%;
background-color: #333; / Choose your background color /
padding: 10px 0; / Adjust padding according to your design /
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); / Optional: Add a subtle shadow /
transition: top 0.3s; / Smooth transition effect */
}

#fixed-header nav ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}

#fixed-header nav ul li {
display: inline-block;
margin: 0 10px;
}

#fixed-header nav ul li a {
text-decoration: none;
color: white;
font-weight: bold;
font-size: 16px;
}
JavaScript (script.js):
Create a new file named script.js and copy the JavaScript content into it.

// script.js
document.addEventListener("scroll", function() {
var header = document.getElementById("fixed-header");

// Check if the scroll position is beyond 100px
if (window.scrollY > 100) {
    header.style.top = "0"; // Show the fixed menu
} else {
    header.style.top = "-100px"; // Hide the fixed menu
}

});

[cehfisher]

Hi @ToitenAn - this issue appears to be resolved per this comment. Could you please confirm and close out this issue? Thank you! (cc @queenofcorgis)