生活随笔
收集整理的這篇文章主要介紹了
jquery实现随着鼠标滚动固定导航栏
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
下面是簡單的導(dǎo)航欄固定效果。。感覺代碼很少，write less Do more.也算是jquery比較方便的原因。
下面代碼僅供參考
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>頁面滾動事件
</title><script src="js/jquery-2.2.3.js"></script><script>$(document).ready(function(){var navtop=$("#nav").offset().top;$(document).scroll(function(){var scroltop=$(document).scrollTop();if (scroltop > navtop){$("#nav").css({"position":"fixed","left":"0px","top":"0px","width":"100%"})}else {$("#nav").css({"position":"","left":"","top":"","width":""})}})})</script><style type="text/css">*{margin: 0px; padding: 0px;}#nav{height:50px;background: #dddddd;}#f{height: 2000px; background:orange;}</style>
</head>
<body>
<div style="height:100px; background:yellow;"></div>
<div id="nav"><p>nav
</p>
</div>
<div id="f">
<p>內(nèi)容區(qū)
</p>
</div>
</body>
</html>
總結(jié)
以上是生活随笔為你收集整理的jquery实现随着鼠标滚动固定导航栏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
