做过移动端项目的小伙伴应该经常遇到页面中需要固定上下导航的需求, 然后很多朋友喜欢用{position:fixed}这个属性来做
代码如下:
html 代码片段
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- </head>
- <style type="text/CSS">
- *{margin:0; padding:0; list-style:none;}
- .wrapper{ margin:0 auto; background: #ccc;}
- .clear{ clear:both; width: 100%; height: 0;}
- .clearfix:after{ visibility: hidden; display: block; font-size: 0; content:""; height: 0; clear: both;}
- .center{ overflow-x: hidden; overflow-y: auto; padding:60px 0;}
- .center p{ height:100px; line-height:100px; font-size:30px;}
- .header{ height: 60px; background: red; position:fixed; top:0; width:100%;}
- .header ul li{ width: 25%; text-align: center; line-height: 60px; float: left; font-size:20px;}
- .footer{ height: 60px; background: blue; position:fixed; bottom:0; width:100%;}
- .footer ul li{ width: 25%; text-align: center; line-height: 60px; float: left; font-size:20px; color: #fff;}
- </style>
- <body>
- <div class="wrapper">
- <div class="header">
- <ul class="clearfix">
- <li > 分类 1</li>
- <li > 分类 2</li>
- <li > 分类 3</li>
- <li > 分类 4</li>
- </ul>
- </div>
- <div class="center">
- <p > 此处是内容区域 </p>
- <p > 此处是内容区域 </p>
- <p > 此处是内容区域 </p>
- <p > 此处是内容区域 </p>
- <p > 此处是内容区域 </p>
- <p > 此处是内容区域 </p>
- </div>
- <div class="footer">
- <ul class="clearfix">
- <li > 分类 1</li>
- <li > 分类 2</li>
- <li > 分类 3</li>
- <li > 分类 4</li>
- </ul>
- </div>
- </div>
- </body>
- </html>
仔细看过手机 app 界面的朋友应该会发现, 这样做是有缺陷的, 不管是微信还是 qq, 右侧的滚动条都是没有滑到导航上来的, 不行可以拿出手机看看, 所以为了更好的页面效果, 这里用到 js 来实现
html 代码片段
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- </head>
- <style type="text/css">
- *{margin:0; padding:0; list-style:none;}
- .wrapper{ margin:0 auto; background: #ccc;}
- .clear{ clear:both; width: 100%; height: 0;}
- .clearfix:after{ visibility: hidden; display: block; font-size: 0; content:""; height: 0; clear: both;}
- .center{ overflow-x:hidden; overflow-y:auto;}
- .center p{ font-size: 30px; line-height: 100px; height: 100px;}
- .header{ height: 60px; background: red;}
- .header ul li{ width: 25%; text-align: center; line-height: 60px; float: left; font-size:20px;}
- .footer{ height: 60px; background: blue;}
- .footer ul li{ width: 25%; text-align: center; line-height: 60px; float: left; font-size:20px; color: #fff;}
- </style>
- <body>
- <div class="wrapper">
- <div class="header">
- <ul class="clearfix">
- <li > 分类 1</li>
- <li > 分类 2</li>
- <li > 分类 3</li>
- <li > 分类 4</li>
- </ul>
- </div>
- <div class="center" style="height:1000px;">
- <p > 此处是内容区域 </p>
- <p > 此处是内容区域 </p>
- <p > 此处是内容区域 </p>
- <p > 此处是内容区域 </p>
- <p > 此处是内容区域 </p>
- </div>
- <div class="footer">
- <ul class="clearfix">
- <li > 分类 1</li>
- <li > 分类 2</li>
- <li > 分类 3</li>
- <li > 分类 4</li>
- </ul>
- </div>
- </div>
- <script type="text/javascript" src='http://s.thsi.cn/js/jquery-1.7.2.min.js'></script>
- <script type="text/javascript">
- $(function(){
- autoSizeHeight();
- window.onresize=function(){ // 拖动浏览器窗口导航也适应
- autoSizeHeight();
- }
- })
- // 固定导航
- function autoSizeHeight(){
- var footerH=0;
- var winH=$(window).height();
- footerH=$(".footer").outerHeight(true);
- // 滚动区域
- if($(".center").length !=0){
- var headerH=$(".center").position().top;
- $(".center").height(winH-footerH-headerH);
- }
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/15425/ef748ba3331783e4057e215b41a498de.html