jQuery 固定导航栏 | 菜鸟工具

​x
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.net/jquery/2.2.1/jquery.min.js"></script>
    <style>
        
​
* {margin: 0; padding: 0;}
​
a {text-decoration: none;}
​
/* This class is added on scroll */
.fixed {
    position: fixed;
    top: 0;
    height: 70px;
    z-index: 1;
}
​
body {
    color: #fff;
    font-family: 'open-sans-bold', AvenirNext-Medium, sans-serif;
    font-size: 18px;
    text-align: center;
}
​
/* Navigation Settings */
nav {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 70px;
    background: #fff;
}
​
nav li {
    display: inline-block;
    padding: 24px 10px;
}
​
nav li a {
    color: #757575;
    text-transform: uppercase;
}
​
section {
    height: 100vh;
}
​
/* Screens Settings */
#screen1 {
    background: #43b29d;
}
​
#screen1 p {
    padding-top: 200px;
}
​
#screen2 {
    background: #efc94d;
}
​
#screen3 {
    background: #e1793d;
}
​
@media only screen and (max-width: 520px) {
​
    nav li {
        padding: 24px 4px;
    }
​
    nav li a {
        font-size: 14px;
    }
​
}
    </style>
</head>
<body>
​
<section id="screen1">
​
    <p>Scroll down</p>
​
    <nav>
         <ul>
   <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">Team</a></li>
              <li><a href="#">Contact</a></li>
         </ul>
    </nav>
​
</section>
​
<section id="screen2"></section>
<section id="screen3"></section>
​
    <script>
           $(document).ready(function(){
       $(window).bind('scroll', function() {
       var navHeight = $( window ).height() - 70;
             if ($(window).scrollTop() > navHeight) { 
                 $('nav').addClass('fixed');
             }
             else {console.log($( window ).height())
                   console.log($(window).scrollTop())
                 $('nav').removeClass('fixed');
             }
        });
    }); 
    </script> 
​
</body>
</html>
HTML