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

代码如下:
   [ 其他 ] 运行代码    下载代码
<!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移动端顶部导航固定效果



7 10



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: js js代码 js实例 javascript javascript代码 javascript实例 js效果 javascript效果 js导航菜单 js导航 js菜单 javascript导航菜单 javascript导航 javascript菜单

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到