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

2019-11-20 09:05:09

字體：大中小

供稿：網(wǎng)友

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

這是一個jQuery智能判斷固定DIV層的特效代碼，通過這個jQuery智能代碼，你可以設(shè)置導航欄、側(cè)邊欄、任何DIV層的固定顯示；現(xiàn)在藍葉的站就用的這個jQuery智能判斷固定的導航條，要看演示的就請下拉頁面滾動條，就會看到導航條固定了；使用這個代碼需要在頁面里引用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智能判斷固定導航條或側(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><!--說明：當下拉滾動條距離頭部220px的時候，就會給#nav這個樣式的DIV層添加一個CSS樣式topfixed使其固定顯示。上面代碼里的220就是下拉滾動條距離頭部的距離，如何設(shè)置請自己修改，#nav是你需要固定的DIV層CSS樣式名。的DIV層CSS樣式名。--></body></html>

效果圖：