向后滚动时变旧

Question

When scroll 200px my navbar will rearranged, but when scroll back to top it doesn't change. I want to change my navbar to old stage when scrolling to top:

 $(document).scroll(function() { var y = $(this).scrollTop(); if (y > 300) { $('.nav').css({"position": "fixed", "top": "0","background-color":"#252525","margin":"0","width":"100%", "padding":"10px 0 10px 0"});; } }); 

 .nav { margin:10px 10px 10px 10px; font-size:120%; text-align:center; padding-bottom:20px; position:static; } .nav > li { display:inline-block; list-style:none; margin-right:10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav> <img src="images/button.png" class="nav-btn"> <ul class="nav" id=""> <li><a href="file:///C:/xampp/htdocs/GEM/index.html" >HOME</a></li> <li ><a href="#" >TUTORIALS</a></li> <li><a href="#">ARTICLES</a></li> <li><a href="#">ABOUT US</a></li> </ul> </nav> 

Answer 1

Try something like this, i have added a class .fixed and added the properties to this class, then i use jQuery addClass() method , this will perfectly work try with the snippet

 $(document).scroll(function() { var y = $(this).scrollTop(); if (y > 300) { $('.nav').addClass('fixed'); } else { $('.nav').removeClass('fixed'); } }); 

 body { height: 1000px; /* showing scroll */ } nav { margin: 10px 10px 10px 10px; font-size: 120%; text-align: center; padding-bottom: 20px; position: static; } .nav > li { display: inline-block; list-style: none; margin-right: 10px; } .fixed { position: fixed; top: 0; background-color:#252525; margin:0; width:100%; padding:10px 0 10px 0; } 

 <nav> <img src="images/button.png" class="nav-btn"> <ul class="nav" id=""> <li><a href="file:///C:/xampp/htdocs/GEM/index.html" >HOME</a></li> <li ><a href="#" >TUTORIALS</a></li> <li><a href="#">ARTICLES</a></li> <li><a href="#">ABOUT US</a></li> </ul> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>