防腾讯固定导航栏
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>防騰訊固定導(dǎo)航欄</title><style type="text/css">//css經(jīng)他界面布局*{margin:0;padding:0;}.header{width: 1000px;margin-left: 230px;}.main{width: 1000px;margin:0 auto;margin-top: 20px;}</style>//jQuery函數(shù)庫(kù)的導(dǎo)入<script type="text/javascript" src="jquery-1.11.1.min.js"></script>//jQuery的實(shí)現(xiàn)<script type="text/javascript">$(function () {var H = $(".top").height();$(window).scroll(function () {var docSccrollTop = $(document).scrollTop();if(docSccrollTop > H){$(".nav").css({"position":"fixed","top":0});$(".main").css("margin-top",106);}else{$(".nav").css({"position":"static"}); $(".main").css("margin-top",20);}});});</script>
</head>
<body>
<div class="header"><div class="top"><img src="img/top.png" /></div><div class="nav"><img src="img/nav.png" /></div></div>
<div class="main"><img src="img/main.png" />
</div>
</body>
</html>
?
當(dāng)我們滑動(dòng)頁(yè)面的時(shí)候，如果滑動(dòng)的高度正好等于頂部視圖高度時(shí)，我們就給nav個(gè)定位,將它固定在一個(gè)位置不變
$(".nav").css({"position":"fixed","top":0});轉(zhuǎn)載于:https://www.cnblogs.com/houjiie/p/6050836.html
總結(jié)
- 上一篇： 1.Tomcat配置
- 下一篇： beta阶段140字评论