随着页面滚动的导航条

60 阅读 0 评论 40 点赞

我是靠谱客的博主傲娇耳机，最近开发中收集的这篇文章主要介绍随着页面滚动的导航条，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

随着页面滚动，底部的导航条也随着滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
	<style  type="text/css">
		body{
		   overflow:hidden;
		}

		.main{
			height:100%;
			width:100%;
			overflow:auto;
			overflow-x:hidden;
			position:absolute;
			border:1px solid red;
			left:0px;
			top:0px;
		}

	.flowDiv{
	 
 
		 
		width:800px;
		height:50px;
		border:1px solid red;
		margin:0 auto ;
	}

	.toolbar{
		 
			height:50px;
			border:1px solid green;
			position:absolute;
			bottom:0px;
			left:0px;
			right:16px;
	}
	</style>
 <BODY>
  <div class="main">
		<div style="height:1500px;width:800px;border:1px solid blue;margin:0 auto;word-break:break-all;overflow:hidden ">
				内容：fwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwdddddddddddddddddddddddddddddddddddddwwwwwwwwwwwwwwwwwwwwwwwwwwwdddddddddddddddddddddhhhhhhhhhhhhhhhwwwwww
		</div>
 
  </div>

<div class="toolbar">
	  <div class="flowDiv" style="text-align:center">
		不变的导航

	  </div>
</div>


 </BODY>
</HTML>