使用原生JS实现页面下滑时,DIV保留在顶部位置

学习笔记 马富天 2016-05-19 14:53:06 91 1

【摘要】使用原生js实现了当页面滚动条下拉的时候,导航栏保持在顶部,当滚动条向上拉的时候,导航栏回到原来的位置。

花了两三个小时,总算是把基本代码理清了,下面是效果图和完整代码。

请输入图片名称

完整代码如下:

  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3. 	<head>
  4. 	    <meta charset="UTF-8">
  5. 	    <title>使用原生JS实现页面下滑时,DIV保留在顶部位置</title>
  6. 	    <style type="text/css">
  7. 	    	*{
  8. 	    		margin:0;
  9. 	    		padding:0;
  10. 	    		font-size:12px;
  11. 	    	}
  12. 	    	body{
  13. 	    		height:2000px;
  14. 	    	}
  15. 		    .top{
  16. 		    	height:150px;
  17. 		    }
  18. 		    .nav{
  19. 		    	line-height:30px;
  20. 		    	top:0;
  21. 		    	background:#D8450B;
  22. 		    	width:80%;
  23. 		    	margin:0 auto;
  24. 		    	left:0;
  25. 		    	border-radius:4px;
  26. 		    }
  27. 		    a{
  28. 		    	display:inline-block;
  29. 		    	margin:0 20px;
  30. 		    	color:white;
  31. 		    	text-decoration:none;
  32. 		    }
  33. 	    </style>
  34. 	</head>
  35. 	<body>
  36.         <div class="top"></div>
  37.         <div id="nav" class="nav">
  38.             <a href="#">首页</a>
  39.             <a href="#">博客</a>
  40.             <a href="#">论坛</a>
  41.             <a href="#">留言</a>
  42.             <a href="#">关于</a>
  43.         </div>   
  44. 		<script type="text/javascript">
  45. 			menuFixed('nav');
  46. 			function menuFixed(id){
  47. 			    var obj = document.getElementById('nav');
  48. 			    var height = obj.offsetTop;
  49. 			    window.onscroll = function(){
  50. 				    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  51. 				    if(scrollTop <= height){
  52. 				        obj.style.position = 'static';			        
  53. 				        obj.style.left = 0;
  54. 				    }else{
  55. 				        obj.style.position = 'fixed';
  56. 				        obj.style.left = '10%';
  57. 				    }
  58. 			    }
  59. 			}
  60. 		</script>        
  61. 	</body>		
  62. </html>

版权归 马富天PHP博客 所有

本文标题:《使用原生JS实现页面下滑时,DIV保留在顶部位置》

本文链接地址:http://www.mafutian.net/120.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

7

3

上一篇《 jQuery实现选项卡 》 下一篇《 说说CDN加速服务器——内容分发网络 》
分享到:

所有评论

  1. 首页
  2. 上一页
  3. 1
  4. 下一页
  5. 尾页
  6. 第1页
  7. 每页12条
  8. 共1页
  9. 共1条
评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码