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人参与
发表评论: