在Windows系統(tǒng)上安裝PHP運行環(huán)境文字教程
757
2023-12-09
本文實例講述了jQuery實現(xiàn)智能判斷固定導(dǎo)航條或側(cè)邊欄的方法。分享給大家供大家參考，具體如下：
這是一個jQuery智能判斷固定DIV層的特效代碼，通過這個jQuery智能代碼，你可以設(shè)置導(dǎo)航欄、側(cè)邊欄、任何DIV層的固定顯示；現(xiàn)在藍(lán)葉的站就用的這個jQuery智能判斷固定的導(dǎo)航條，要看演示的就請下拉頁面滾動條，就會看到導(dǎo)航條固定了；使用這個代碼需要在頁面里引用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è)邊欄代碼如何使用請見下面的說明：
<!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)下拉滾動條距離頭部220px的時候，就會給#nav這個樣式的DIV層添加一個CSS樣式topfixed使其固定顯示。
上面代碼里的220就是下拉滾動條距離頭部的距離，如何設(shè)置請自己修改，#nav是你需要固定的DIV層CSS樣式名。的DIV層CSS樣式名。-->
</body>
</html>
效果圖：
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery擴展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
