窗口滚动一定距离后，导航栏样式变化，固定到窗口顶部

痛定思痛。 2021-09-15 07:52 249阅读 0赞

摘要：在学习前端的过程中，发现Boss直聘网站，在滚动一定距离后，导航栏部分布局发生变化，固定到窗口顶部，且始终不变。再次回滚后，导航栏布局恢复。

代码如下：

<!DOCTYPE html>
    <html lang="en">
    
    	<head>
    		<meta charset="UTF-8" />
    		<title>滚动一定距离导航栏固定</title>
    		<style type="text/css">
    			* {
    				margin: 0;
    				padding: 0;
    				font-size: 40px;
    				font-family: '微软雅黑';
    				text-align: center;
    				line-height: 100px;
    				width: 100%;
    			}
    			/*顶部*/
    			
    			.top {
    				height: 100px;
    				background: blue;
    			}
    			/*导航栏部分*/
    			
    			.nav {
    				height: 100px;
    				background: red;
    			}
    			/*导航栏变异部分*/
    			
    			.nav2 {
    				height: 100px;
    				background: yellowgreen;
    			}
    			/*测试部分*/
    			
    			.test {
    				background: #6495ED;
    				height: 2000px;
    				padding-top: 100px;
    			}
    			
    			.fixnav {
    				position: fixed;
    				top: 0px;
    				left: 0px;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div class="top">顶部</div>
    		<div class="nav">导航栏部分</div>
    		<div class="nav2">导航栏变异部分</div>
    		<div class="test">这个区域仅仅是用于测试的</div>
    	</body>
    
    </html>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
    	$(function() {
    		$(".nav2").hide();
    		$(window).scroll(function() {
    			if($(document).scrollTop() >= 200) {
    				$(".nav2").addClass("fixnav").slideDown();
    			} else {
    				$(".nav2").hide();
    			}
    		})
    	})
    </script>

<table>  滚动前后对比图  
 <tbody> 
  <tr> 
   <td style="text-align:center;">滚动前</td> 
   <td style="text-align:center;">滚动后</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;"><img src="https://img-blog.csdn.net/20180425213232769" align="middle" width="400" alt=""></td> 
   <td><img src="https://img-blog.csdn.net/20180425213310877" align="middle" width="400" alt=""></td> 
  </tr> 
 </tbody> 
</table>