JavaScript移动端顶部导航固定效果

当前位置：首页 > 代码实例 > html5 css3代码分类 > 其他 > JavaScript移动端顶部导航固定效果

本章节分享一段关于导航栏的代码实例。
它实现了导航栏固定于网页的顶端，并且也实现了页面的尺寸自适应效果。

代码如下:

[ 其他 ] 运行代码下载代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>51前端</title>
<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>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.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>
</head>
<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>
</body>
</html>

代码描述：JavaScript 移动端顶部导航固定效果。JavaScript移动端顶部导航固定效果

下载全部收藏

181 241

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册