jQuery實(shí)現(xiàn)智能判斷固定導(dǎo)航條或側(cè)邊欄的方法

更新時(shí)間：2016年09月04日 15:52:09 作者：onestopweb

這篇文章主要介紹了jQuery實(shí)現(xiàn)智能判斷固定導(dǎo)航條或側(cè)邊欄的方法,涉及jQuery針對(duì)頁面元素屬性的判斷與動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)智能判斷固定導(dǎo)航條或側(cè)邊欄的方法。分享給大家供大家參考，具體如下：

這是一個(gè)jQuery智能判斷固定DIV層的特效代碼，通過這個(gè)jQuery智能代碼，你可以設(shè)置導(dǎo)航欄、側(cè)邊欄、任何DIV層的固定顯示；現(xiàn)在藍(lán)葉的站就用的這個(gè)jQuery智能判斷固定的導(dǎo)航條，要看演示的就請(qǐng)下拉頁面滾動(dòng)條，就會(huì)看到導(dǎo)航條固定了；使用這個(gè)代碼需要在頁面里引用jQuery庫的JS文件，現(xiàn)在的網(wǎng)站一般都引用了jQuery庫代碼，如果沒有那就打開你網(wǎng)站的模板，在頁頭或者頁位加上<script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>代碼保存，這就成功引用的JQ庫代碼；具體JQ智能判斷固定導(dǎo)航條或側(cè)邊欄代碼如何使用請(qǐng)見下面的說明：

<!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>
<style>
.topfixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9000;
  webkit-box-shadow: 0px 4px 4px #baacc9;
  -moz-box-shadow: 0px 4px 4px #baacc9;
  box-shadow: 0px 4px 4px #baacc9;
  background: #fff;
}
</style>
</head>
<body>
<div id="nav" style=" width:100%; height:20px; background-color:#f60; margin:0 auto;"></div>
<div style="height:10000px;"></div>
<script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(window).scroll(function(){
if($(this).scrollTop()>220){
$('#nav').addClass('topfixed');}
else {
$('#nav').removeClass('topfixed');
}});
</script>
<!--說明：當(dāng)下拉滾動(dòng)條距離頭部220px的時(shí)候，就會(huì)給#nav這個(gè)樣式的DIV層添加一個(gè)CSS樣式topfixed使其固定顯示。
上面代碼里的220就是下拉滾動(dòng)條距離頭部的距離，如何設(shè)置請(qǐng)自己修改，#nav是你需要固定的DIV層CSS樣式名。的DIV層CSS樣式名。-->
</body>
</html>

效果圖：