Contoh dalam artikel ini menerangkan cara jQuery boleh meniru kesan navigasi tetap kepala Baidu Tieba. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Jquery digunakan di sini untuk mencapai kesan membetulkan kepala pada halaman web, tetapi tidak menatal dengan bar skrol Kesan khas halaman web telah disusun dalam Baidu Tieba Pada mulanya, bar tetap boleh diseret ke bahagian atas halaman web dengan bar skrol, tetapi Selepas mencapai bahagian atas halaman web, seret bar skrol sekali lagi Kepala tidak akan menatal, tetapi kandungan lain boleh menatal Nampaknya kesan yang telah dilihat a banyak di Internet.
Tangkapan skrin kesan berjalan adalah seperti berikut:
Kod khusus adalah seperti berikut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航固定</title>
<script src="jquery-1.6.2.min.js"language="javascript" type="text/javascript"></script>
<script>
$(function(){
$(window).scroll(function() {
//$("body").css({"background-position":"center "+$(window).scrollTop()+""});
if($(window).scrollTop()>=250){
$(".nav").addClass("fixedNav");
}else{
$(".nav").removeClass("fixedNav");
}
});
});
</script>
<style>
*{
margin:0px;
padding:0px;
}
div.nav{
background:#000000;
height:57px;
line-height:57px;
color:#ffffff;
text-align:center;
font-family:"微软雅黑", "黑体";
font-size:30px;
}
div.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="header" style="background:#CCCC00;height:250px;"></div>
<div class="nav">
<p>导航固定</p>
</div>
<div class="content" style="background:#0099FF; height:2000px;"></div>
</body>
</html>
Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
