stackoom
  简体   繁体   中英

How to make a sticky navbar?

 原文  2020-04-26 08:46:41  1   2    javascript/ html/ css/ onscroll

Question

I'm trying to make some code to make a sticky navbar, such that the position is fixed when I scroll down, however, it doesn't work. I wonder if the CSS is the problem, because most of the HTML and javascript would not really affect it. I have tried it on some of my other websites, and they work, but it doesn't seem to work on this one.

<div id="main-nav">
    <nav>
        <h2 id="logo" class="main-nav">Captain Max from ERA</h2>
        <br>
        <ul class="main-nav">
            <li> <a href="#">Listings</a></li>
            <li> <a href="#">Get in touch</a></li>
            <li> <a href="#">Projects</a></li>
        </ul>
    </nav>
</div>

The script for this is here, I'm not sure if anything is wrong with this though.

<script>
var navbar = document.getElementById("main-nav");
var sticky = navbar.offsetTop;
function myFunction() {
    if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
    } else {
        navbar.classList.remove("sticky");
    }
</script>

The CSS is here, it seems like I made a property that altered how the sticky keyboard works. 

.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

.sticky + .content {
  padding-top: 60px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
    html {
    font-family: 'Raleway', sans-serif;
    font-size: 20px;
    font-weight: 300;
    text-rendering: optimizeLegibility;
}

nav {
    background-color: #7b8195;
    color: #e9e6df;
    overflow: hidden;
}

#logo {
    font-family: 'Raleway', sans-serif;
    font-size: 250%;
    border-top: 10px;
    padding-right: 150px;
    padding-left: 10px;
    padding-top: 10px;
}

nav li {
    display:inline-block;
    margin-left: 40px;
}

.main-nav {
    float: left;
    list-style: none;
    margin-right: 60px;
    border-bottom: 10px;
    padding-bottom: 10px;
}

.main-nav li a {
    float: right;
    color: #e9e6df;
    text-decoration: none;
    font-size: 90%;
}

.main-nav li a:link,
.main-nav li a:visited{
    padding-bottom: 8px;
    color: #e9e6df;
    text-decoration: none;
    font-size: 90%;
    border-bottom: 2px solid transparent;
    transition: border-bottom 0.2s;
}

.main-nav li a:hover,
.main-nav li a:active{
   border-bottom: 2px solid #e9e6df;
}

The link to the website is here

2 answers

solution1
 0  2020-04-26 09:04:10

Everything is correct, but you have to add some CSS below to make it work.

<style>
#navbar {
  overflow: hidden;
  background-color: #333;
}

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

#navbar a:hover {
  background-color: lightblue;
  color: black;
}

#navbar a.active {
  background-color: blue;
  color: white;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
</style>

Full code here: 

 window.onscroll = function() {myFunction()}; var navbar = document.getElementById("navbar"); var sticky = navbar.offsetTop; function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } else { navbar.classList.remove("sticky"); } }
 #navbar { overflow: hidden; background-color: #333; } #navbar a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } #navbar a:hover { background-color: lightblue; color: black; } #navbar a.active { background-color: blue; color: white; }.sticky { position: fixed; top: 0; width: 100%; }
 <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="navbar"> <a class="active" href="javascript:void(0)">Home</a> <a href="javascript:void(0)">News</a> <a href="javascript:void(0)">Contact</a> </div> <div class="content"> <h3>Sticky Navigation Example</h3> <p>The navbar will stick to the top when you reach its scroll position.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> </div> </body>

solution2
 0 ACCPTED  2020-04-27 01:49:11

What I can see here in your website is you havn't closed the script properly. You have missed one closed } brases.

<script>
var navbar = document.getElementById("main-nav");
var sticky = navbar.offsetTop;
function myFunction() {
    if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
    } else {
        navbar.classList.remove("sticky");
    }
   }

</script>

在此处输入图像描述

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to use IntersectionObserver API to make navBar sticky How to make my navbar sticky in mobile view? How to make a sticky navbar in R shiny? Make the Bootstrap Navbar Sticky Can't make a sticky navbar How do I make the Second Navbar Menu Sticky Work Correctly? How do I make my Sticky NavBar Scroll Animate properly? How to make a sticky CTA under navbar, that closes when clicked? How I can make sticky navbar using bootstrap? How to make a “sticky” navbar using only HTML and CSS (without JS)?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM