當前位置：首頁 >

防腾讯固定导航栏

發(fā)布時間：2025/7/14 25 豆豆

生活随笔收集整理的這篇文章主要介紹了防腾讯固定导航栏小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

<!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

總結

以上是生活随笔為你收集整理的防腾讯固定导航栏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

腾讯