I Want To Make A Header That Freezes

So I'm trying to make a header that freezes. I have a top navigation under a banner, and I want to make it so that the banner disappears after I scroll down, but the top navigation

Solution 1:

Unless you want to support IE11 then position: sticky is the way to go. Here's an example of how you can use it.

.sticky-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: #131418;
  color: #f3f3f3;
  padding: 0.5em;
}

<divclass="banner"><ul><li>Foo</li><li>bar</li><li>baz</li></ul></div><divclass="sticky-header"><span>Foo</span><span>bar</span><span>baz</span></div><divclass="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Erat pellentesque adipiscing commodo elit. Malesuada fames
    ac turpis egestas sed tempus urna. Lacinia at quis risus sed vulputate odio. Vitae nunc sed velit dignissim sodales ut eu sem. Sed odio morbi quis commodo odio aenean sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
    Odio aenean sed adipiscing diam donec adipiscing tristique risus nec. Proin sed libero enim sed faucibus. Mattis pellentesque id nibh tortor id aliquet lectus proin nibh. Ultricies lacus sed turpis tincidunt. Tortor aliquam nulla facilisi cras fermentum.
    Elementum nibh tellus molestie nunc non. Nisl purus in mollis nunc sed id semper risus in. Congue mauris rhoncus aenean vel elit scelerisque mauris. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis.
  </p><p>Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Ut tellus elementum sagittis vitae et leo. Arcu ac tortor dignissim convallis aenean et tortor. Sed blandit libero volutpat
    sed cras ornare arcu dui. Lorem ipsum dolor sit amet. Gravida cum sociis natoque penatibus et. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Leo vel orci porta non pulvinar neque laoreet suspendisse. Ultricies lacus sed turpis
    tincidunt. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing. Tincidunt lobortis feugiat vivamus at augue eget. Vitae sapien pellentesque habitant morbi tristique senectus. Volutpat consequat mauris nunc congue nisi vitae suscipit.
    Semper feugiat nibh sed pulvinar. Duis at tellus at urna condimentum mattis pellentesque id nibh.
  </p><p>Turpis egestas maecenas pharetra convallis posuere morbi leo. Potenti nullam ac tortor vitae purus. Facilisis sed odio morbi quis. Tempor nec feugiat nisl pretium fusce id velit ut. Lorem dolor sed viverra ipsum. Id eu nisl nunc mi ipsum faucibus. Non
    sodales neque sodales ut etiam sit. Sed vulputate mi sit amet mauris commodo quis imperdiet massa. Lacinia quis vel eros donec ac odio. Sed elementum tempus egestas sed sed.
  </p><p>Et molestie ac feugiat sed lectus vestibulum. Tempor commodo ullamcorper a lacus vestibulum sed arcu non. Adipiscing tristique risus nec feugiat in fermentum posuere urna nec. Consectetur adipiscing elit ut aliquam purus. Ultrices neque ornare aenean
    euismod elementum nisi quis eleifend. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis. Fermentum et sollicitudin ac orci. Tristique senectus et netus et malesuada fames ac turpis egestas. Sed nisi lacus sed viverra tellus
    in hac. Pulvinar mattis nunc sed blandit. Amet porttitor eget dolor morbi non arcu risus quis. Curabitur gravida arcu ac tortor dignissim convallis aenean et. Blandit cursus risus at ultrices mi tempus imperdiet. Hac habitasse platea dictumst quisque
    sagittis purus. Et tortor consequat id porta nibh venenatis cras sed.
  </p></div>

Solution 2:

Try w3school.com solution

css + javascript

• hide a navigation menu on scroll demo 👈

Solution 3:

This is a fixed navbar that disappear on scroll down and appear on scroll 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%;
}

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

.navbara:hover {
  background: #ddd;
  color: black;
}

.main {
  padding: 16px;
  margin-top: 30px;
  height: 1500px; /* Used in this example to enable scrolling */
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="navbar"><ahref="#home">Home</a><ahref="#news">News</a><ahref="#contact">Contact</a></div><divclass="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>