Rumah > Artikel > hujung hadapan web > jQuery melaksanakan effect_jquery navigasi tetap kepala Baidu Tieba

jQuery melaksanakan effect_jquery navigasi tetap kepala Baidu Tieba

WBOYasal: 2016-05-16 15:46:181231semak imbas

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.

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：Pelaksanaan jQuery fungsi pemilihan imej kotak lungsur example_jqueryArtikel seterusnya：Pelaksanaan jQuery fungsi pemilihan imej kotak lungsur example_jquery

Artikel berkaitan

Lihat lagi