jquery实现的导航固定效果。
.nav为导航的class。
$(function(){ $(window).scroll(function() { if($(window).scrollTop()>=250){ $(".nav").addClass("fixedNav"); }else{ $(".nav").removeClass("fixedNav"); } }); });
CSS代码
.fixedNav{ position:fixed; top:0px; left:0px; width:100%; z-index:100000; _position:absolute; _top:expression(eval(document.documentElement.scrollTop)); }
HTML代码
<div class="nav"><p>导航固定</p></div>
我们看下完整的代码,可以预览的哦~
<!DOCTYPE html> <html> <head> <title>导航固定</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="https://www.jiangweishan.com/demo/js/jquery-2.2.4.min.js"></script> <style type="text/css"> *{margin: 0px;padding: 0px;} .nav{height:40px;text-align:center;background:#000;color:#fff;line-height:40px} .fixedNav{ position:fixed; top:0px; left:0px; width:100%; z-index:100000; _position:absolute; _top:expression(eval(document.documentElement.scrollTop)); } </style> </head> <body> <div class="nav"> <p>导航固定</p> </div> <div style="height:1800px"></div> <script type="text/javascript"> $(function(){ $(window).scroll(function() { if($(window).scrollTop()>=250){ $(".nav").addClass("fixedNav"); }else{ $(".nav").removeClass("fixedNav"); } }); }); </script> </body> </html>
网友评论文明上网理性发言 已有0人参与
发表评论: