吸顶效果，很多人都见过，感觉滚动起来就是看着挺爽的，不过吸顶效果做的更加的炫酷，可以 根据滚动上去的高度 ， 动态 设置头部导航栏 背景色的透明度，的确很好看。
这里我也用不到变换背景色，索性 简单点做，就直接使用 固定定位，头部向上吸顶，底部向下吸底，也省去了内部content区域设置滚动条，太难看了,直接用外部整体滚动条即可。
同时也解决了，我 设置content区域高度的问题，这样不管数据或多或少，头部永远在浏览器屏幕顶部，底部永远在可视化屏幕的底部，不用管用户缩小屏幕 ，见头不见尾 显示不全的问题。
固定定位：
position: fixed;
z-index: 9999;
top: 0; // 设置header
// bottom: 0; 设置footer
1. intranet_test_site.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内网测试站点</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="./lib/jquery-3.2.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id="netSite">
<div class="header">
<div class="wrap" style="padding: 0 40px;">
<h1 style="display: inline-block;">
<img style="width:160px;" src="./img/login_logo.png" alt="">
</h1>
<h3 style="float: right;display: inline-block;">
内网测试站点
</h3>
</div>
</div>
<div class="content">
<div class="wrap" style="padding:0 100px;">
<ul id="list" class="search-ul">
</ul>
</div>
</div>
<div class="footer">
<div class="wrap" style="text-align: center;">
<div class="aw-footer aw-wecenter" id="bg_footer_div">
<span><span class="hidden-xs" style="padding: 0 5px">上海宝信软件股份有限公司 版权所有</span></span><span><span class="hidden-xs" style="padding: 0 5px"><a href="http://www.miitbeian.gov.cn" target="_blank">沪ICP备10001471号</a></span><span style="padding: 0 3px;position: relative; top: -1px;"><img src="./img/footer_logo1.png" height="14px"> </span><span style="padding: 0 3px;position: relative; top: -1px;"><img src="./img/footer_logo2.png" height="14px"> </span></span><span><span class="hidden-xs" style="padding: 0 5px"><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31011302003221" target="_blank">沪公网安备 31011302003221号</a></span><span style="padding: 0 3px;position: relative; top: -1px;"><img src="./img/footer_beian.png" height="14px"> </span></span><span></span><span></span><span></span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
// json假数据
var json ={
"dataSource": [
{
"description":"宝武因特网出口DMZ区测试站点：http://10.251.20.93/",
"url": "http://10.251.20.93/"
},
{
"description":"宝武因特网出口DMZ区测试站点：http://10.251.20.93/",
"url": "http://10.251.20.93/"
},
{
"description":"宝武因特网出口DMZ区测试站点：http://10.251.20.93/",
"url": "http://10.251.20.93/"
},
{
"description":"宝武因特网出口DMZ区测试站点：http://10.251.20.93/",
"url": "http://10.251.20.93/"
},
{
"description":"宝武因特网出口DMZ区测试站点：http://10.251.20.93/",
"url": "http://10.251.20.93/"
},
{
"description":"宝武因特网出口DMZ区测试站点：http://10.251.20.93/",
"url": "http://10.251.20.93/"
},
{
"description":"宝武因特网出口DMZ区测试站点：http://10.251.20.93/",
"url": "http://10.251.20.93/"
},
{
"description":"宝武因特网出口DMZ区测试站点：http://10.251.20.93/",
"url": "http://10.251.20.93/"
},
{
"description":"宝武因特网出口DMZ区测试站点：http://10.251.20.93/",
"url": "http://10.251.20.93/"
},
{
"description": "宝武私有云区域测试站点：http://10.70.0.16/",
"url": "http://10.70.0.16/"
},
{
"description":"宝武因特网出口DMZ区测试站点：http://10.251.20.93/",
"url": "http://10.251.20.93/"
},
{
"description": "宝武私有云区域测试站点：http://10.70.0.16/",
"url": "http://10.70.0.16/"
},
{
"description":"宝武因特网出口DMZ区测试站点：http://10.251.20.93/",
"url": "http://10.251.20.93/"
},
{
"description": "宝武私有云区域测试站点：http://10.70.0.16/",
"url": "http://10.70.0.16/"
},
{
"description":"宝武因特网出口DMZ区测试站点：http://10.251.20.93/",
"url": "http://10.251.20.93/"
},
{
"description": "宝武私有云区域测试站点：http://10.70.0.16/",
"url": "http://10.70.0.16/"
},
{
"description":"宝武因特网出口DMZ区测试站点：http://10.251.20.93/",
"url": "http://10.251.20.93/"
},
{
"description": "宝武私有云区域测试站点：http://10.70.0.16/",
"url": "http://10.70.0.16/"
},
{
"description":"宝武因特网出口DMZ区测试站点：http://10.251.20.93/",
"url": "http://10.251.20.93/"
},
{
"description": "宝武私有云区域测试站点：http://10.70.0.16/",
"url": "http://10.70.0.16/"
}
]
};
var data = json.dataSource;
for(var i = 0; i < data.length; i++){
var temp = "<a href='"+data[i].url+"' target='_blank'><li>"+data[i].description+"</li></a>";
$("#list").append(temp);
}
});
</script>
</body>
</html>
2. main.css
/*
* @Author: adminZz
* @Date: 2018-04-17 14:49:03
* @Last Modified by: adminZz
* @Last Modified time: 2018-04-17 15:57:54
*/
*{
margin:0;
padding:0;
}
#netSite .wrap{
min-width: 960px;
margin: 0 auto;
}
#netSite{
width: 100%;
height: 100%;
}
#netSite .header{
position: fixed;
z-index: 9999;
top: 0;
width: 100%;
height: 60px;
line-height: 60px;
padding: 15px 0;
background: #fff;
border-bottom: 1px solid #e3e3e3;
}
#netSite .content{
margin-top: 90px;
margin-bottom: 70px;
}
#netSite .footer{
position: fixed;
z-index: 9999;
bottom: 0;
width: 100%;
height: 40px;
line-height: 40px;
padding: 15px 0;
background: #fff;
font-size: 14px;
border-top: 1px solid #e3e3e3;
}
#netSite a{
color: #428bca;
text-decoration: none;
}
.search-ul {
/* overflow-y: auto; */
padding: 5px 10px 10px 10px;
}
.search-ul a li{
color: #428bca;
padding-left: 10px;
list-style: none;
box-sizing: content-box;
font-size: 16px;
height: 48px;
line-height: 48px;
margin-top:5px;
background: #f5f5f5;
border-left:2px solid transparent;
}
.search-ul li:nth-of-type(odd) {
background-color: #f9f9f9;
}
.search-ul li:hover {
border-left:2px solid #ff9900 !important;
background-color: #f5f5f5;
cursor: pointer;
}
img文件、lib下的jQuery库
- img图片
login_logo.png
footer_logo1.png
footer_logo2.png
footer_beian.png
- jQuery库自己下把。
效果如下：
效果1.png
上下固定，只滚动中间content.png
类似上下吸顶效果.png
测试.png
测速中.png
更好的点击链接跳转
之前做的是li包含a标签，但是发现，只能点a才能跳转，点li空白区域不会跳转。
最好的做法：就是使用a标签包裹li标签，这样点li空白区域也可进行跳转。
over
网友评论