jquery - 向后滚动时回到旧样式

Question

当滚动 200 像素时，我的导航栏将重新排列，但当滚动回到顶部时它不会改变。我想在滚动到顶部时将导航栏更改为旧阶段:

$(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

尝试这样的事情，我添加了一个类 .fixed 并将属性添加到这个类中，然后我使用 jQuery addClass() 方法，这将完美地工作尝试使用代码段

$(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>