Question

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

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

滚动回来时来到旧式

1 个答案: