cari

Rumah >hujung hadapan web >tutorial js >Bagaimana jQuery meniru gmail untuk melaksanakan layout_jquery tetap

Bagaimana jQuery meniru gmail untuk melaksanakan layout_jquery tetap

WBOY
WBOYasal
2016-05-16 15:57:281204semak imbas

Contoh dalam artikel ini menerangkan cara jQuery meniru gmail untuk melaksanakan reka letak tetap. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan 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>fixed bar demo</title>
<style type="text/css" media="screen">
body{
margin:0;
height:2000px;
}
#top{
background-color:#333;
height:80px;
}
#nav{
background-color:#999;
height:30px;
position:absolute;
top:80px;
width:100%;
}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 $(window).scroll(function(){
 var scrollTop = $(window).scrollTop();
 if(scrollTop < 80)
 $("#nav").css('top', '80px');
 else
 $("#nav").css('top', scrollTop +'px');
 });
});
</script>
</head>
<body>
<div id="top">
</div>
<div id="nav">
</div>
</body>
</html>

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimana untuk pramuat imej dengan jquery_jqueryArtikel seterusnya：Bagaimana untuk pramuat imej dengan jquery_jquery

Artikel berkaitan

Lihat lagi