I am interested in creating a header that remains static

Currently, I am attempting to create a header that has a freezing effect. My goal is to have a banner at the top with a navigation menu underneath it. When scrolling down, I want the banner to disappear but have the navigation menu remain frozen at the top of the page. I have been struggling to achieve this using the position: fixed property since I need the element below it to freeze as well. In summary, my current layout looks like this:

    <div><img src="img"></div>
    <nav>...</nav>

The desired outcome is for the banner to vanish when I scroll down, while the navigation menu stays locked at the top of the page, ensuring its visibility throughout.

htmlcss

Answer №1

If you're not concerned about IE11 compatibility, then using position: sticky is the recommended approach. Check out this code snippet to see how it works.

.sticky-nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: #131418;
  color: #f3f3f3;
  padding: 0.5em;
}
<div class="header">
  <ul>
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
  </ul>
</div>

<div class="sticky-nav">
  <span>Option 1</span>
  <span>Option 2</span>
  <span>Option 3</span>
</div>

<div class="main-content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh.</p>
  <p>Commodo odio aenean sed adipiscing diam donec adipiscing tristique.</p>
  <p>Et molestie ac feugiat sed lectus vestibulum. Tempor commodo ullamcorper a lacus vestibulum sed arcu non.</p>
  <p>Turpis egestas maecenas pharetra convallis posuere morbi leo. Potenti nullam ac tortor vitae purus.</p>
</div>

Answer №2

Check out the solution on w3school.com

CSS and JavaScript

  • Learn how to hide a navigation menu when scrolling demo 👈

Answer №3

This code snippet creates a fixed navigation bar that disappears when scrolling down and reappears when scrolling to the top.

$(window).on( 'scroll', function(){
  if($(window).scrollTop() < 100){
  $(".navbar").slideDown();
  } else {
  $(".navbar").slideUp();
  }
});
{margin:0;}

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background: #ddd;
  color: black;
}

.main {
  padding: 16px;
  margin-top: 30px;
  height: 1500px; /* Used in this example to enable scrolling */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

<div class="main">
  <h1>Fixed Top Menu</h1>
  <h2>Scroll this page to see the effect</h2>
  <h2>The navigation bar will stay at the top of the page while scrolling</h2>

  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
  <p>Some text some text some text some text..</p>
</div>

</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can someone please explain how I can extract and display information from a database in separate text boxes using Angular?

Working with two textboxes named AuthorizeRep1Fname and AuthorizeRep1Lname, I am combining them in typescript before storing them as AuthorizeRep1Name in the database. Refer to the image below for the result. This process is used to register and merge the ...

htmlsql-serverangulartypescript

What criteria do web browsers use to determine the order in which to apply @media queries when there are multiple relevant queries for the device

My website requires adjusting element positioning based on specific resolutions. One example is this media query: @media all and (max-width: 385px) And another one: @media all and (max-width: 500px) The device I am using has a width below 385px, but i ...

cssmedia-queries

Tips for aligning a dropdown button with the other elements in your navbar

I followed the code outline from a tutorial on We3schools, but I'm having an issue with the button not aligning correctly with the navbar. I attempted to adjust the code for proper alignment before publishing, but was unsuccessful. Here is the GitHub ...

javascripthtmlcssnavbar

Attempting to eliminate the vertical scroll on my page that matches the height of the navigation bar

I am struggling with the alignment of a login page form that needs to be centered both horizontally and vertically, while allowing for slight scrolling down to accommodate the navigation bar height. I have attempted to adjust the classes and style height ...

htmlcssforms

The `user-select: none` property displays distinct behavior in Safari

My Goal I am in the process of creating an input-like content editable div. The idea is to click on tags outside the div and insert them inside the div while still being able to type around these tags. The Issue and Reproduction Steps To prevent tag but ...

javascripthtmlcssvue.jsrangy

Is transforming lengthy code into a function the way to go?

I have successfully implemented this code on my page without any errors, but I am wondering if there is a more concise way to achieve the same result. Currently, there is a lot of repeated code with only minor changes in class names. Is it possible to sh ...

javascriptjquerycssloopsscrollto

Managing modules within the node_modules folder that have dependencies on .css files

Currently, I am involved in a project where we are utilizing a custom UI library that includes some dependencies. These components come with their own corresponding .css files. The structure of the source code looks like this: |- src |-| |- components ...

cssreactjswebpackreact-starter-kit

Transferring the values of JavaScript objects to HTML as strings

My goal is to generate HTML elements based on the values of specific JavaScript objects that are not global variables. However, when attempting to execute the code below, I encounter an error stating "params is not defined." What I actually aim to achieve ...

javascripthtmlstringdom

Pulling out a particular row from an HTML table with the help of HTML::TreeBuilder

I am a beginner in perl programming and I am facing a major challenge. I need to parse an HTML file that contains a single table, and extract a specific row based on one of its column entries. Here is a snippet of the HTML file: many previous rows descri ...

htmlperlhtml-table

Why should <template> be used in Vuetify?

Exploring the possibilities of Vuetify 2.0 in my current project has led me to dive into the v-stepper component, designed for displaying progress through numbered steps. In the example provided in the playground, I noticed the use of the <template> ...

javascripthtmlvue.jsvuetify.js

The variables are filled with HTML tags that will render the display in

I am facing an issue with displaying HTML tags in my website. When I try to print a variable containing HTML tags in the tpl file, it shows the tags along with the content. This is how it looks in the PHP file: $content = "<h1>Header</h1>< ...

htmlvariablessmarty

Simulating the behavior of display blocks

HTML similar to the example below is working perfectly, however, there seems to be an issue with Sharepoint 2013's editor. When trying to edit the link text within a block that has 'display: block' or 'float', it becomes impossible ...

csscss-floatblocksharepoint-2013

Unforeseen box model quirks found in modern browsers when styling <table> elements

Here is a sample HTML document that demonstrates the issue: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; ...

htmlcss

Overflow due to cascading style sheets

THE ANSWER TO THIS QUESTION HAS BEEN PROVIDED In regards to this particular div that contains two unordered lists, I am seeking a solution where these lists can be positioned side by side instead of above or below each other. I have attempted various met ...

htmlcssmenucss-float

Tips for executing a function on a specific class selector using the document.getElementsByClassName method

When I click on a specific class, I want to implement a fade-out function in JavaScript. However, I am struggling to make a particular class fade out successfully. I attempted to use the this keyword, but it seems like I might be using it incorrectly bec ...

javascripthtmlcss

Issues with ng-click functionality not activating on <li> HTML elements

I've been attempting to add ng-click functionality to my list, but it's not working as expected. I've tried adding the ng-repeat directive and also without it on li elements. Here is the snippet of HTML code: <ul class="nav nav-tabs"&g ...

javascripthtmlangularjs

The JSColor onChange event is throwing an error indicating that the function is not defined

When attempting to use the onChange event for JSColor to call a function, I consistently encounter an error indicating that the function is not defined. The code snippet below illustrates the issue: export class NavBar extends React.Component { constr ...

javascripthtmlreactjsfunctionjscolor

Using Page.ResolveClientUrl in JavaScript or jQuery allows for easy resolution of client

I find myself in a predicament where I need to choose between using an HTML page instead of a .aspx page for performance reasons. Currently, I am using an aspx page solely because of the CSS and javascript file paths like: <script type="text/javascript ...

javascriptjqueryhtmlasp.net

Notifying the chosen option using jQuery

I have been attempting to display an alert on the webpage based on the selected option. Unfortunately, it appears that my code is not functioning properly. This is what I have tried: $(document).ready(function(){ $("select.country").change(functio ...

javascriptjqueryhtmldrop-down-menu

unable to execute PHP code

I am attempting to execute a PHP file that will update a database. On Chrome, I am encountering this error: This is the code I have in my index.html file: <!DOCTYPE html> <html> <body> <input type="text" id="descriptioninput"> ...

javascripthtmlajax