當前位置：
首頁 >
防腾讯固定导航栏
發(fā)布時間：2025/7/14
25
豆豆
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>防騰訊固定導航欄</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ù)庫的導入<script type="text/javascript" src="jquery-1.11.1.min.js"></script>//jQuery的實現(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>
?
當我們滑動頁面的時候，如果滑動的高度正好等于頂部視圖高度時，我們就給nav個定位,將它固定在一個位置不變
$(".nav").css({"position":"fixed","top":0});轉載于:https://www.cnblogs.com/houjiie/p/6050836.html
總結
- 上一篇： 1.Tomcat配置
- 下一篇： beta阶段140字评论