jquery實現(xiàn)企業(yè)定位式導(dǎo)航效果
更新時間：2018年01月01日 11:03:30 作者：hjw453321854
這篇文章主要介紹了jquery實現(xiàn)企業(yè)定位式導(dǎo)航效果
本文實例為大家分享了jquery實現(xiàn)企業(yè)定位式導(dǎo)航的具體代碼，供大家參考，具體內(nèi)容如下
完整代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{margin:0;padding:0;}
.nav{width:100%;position:absolute;top:150px;}
.nav ul{width:1200px;height:50px;margin:0 auto;background:#ccc;}
.nav ul li{width:150px;height:50px;line-height:50px;text-align:center;list-style:none;float:left;cursor:pointer;}
.nav ul li:hover{background:#666;}
.nav ul li a{color:#000;font-size:18px;text-decoration:none;}
.nav .active{background:#666;}
.cont{width:1200px;height:4500px;margin:0 auto;}
.cont ol{width:1200px;height:4500px;margin:0 auto;}
.cont ol li{width:1200px;height:500px;list-style:none;}
.cont ol li p{color:#000;font-size:48px;}
</style>
</head>
<body>
<div style="height:200px;width:100%;"></div>
<div class="nav">
<ul>
<li class="active">page1</li>
<li>page2</li>
<li>page3</li>
<li>page4</li>
<li>page5</li>
<li>page6</li>
<li>page7</li>
<li>page8</li>
</ul>
</div>
<div class="cont">
<ol>
<li style="background:#aaa"><p>page1</p></li>
<li style="background:#999"><p>page2</p></li>
<li style="background:#666"><p>page3</p></li>
<li style="background:#333"><p>page4</p></li>
<li style="background:#bbb"><p>page5</p></li>
<li style="background:#aaa"><p>page6</p></li>
<li style="background:#ccc"><p>page7</p></li>
<li style="background:#000"><p>page8</p></li>
</ol>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(".nav ul li").click(function(){
var index=$(this).index();
var i=150+index*501+'px'
$("html,body").animate({scrollTop:i},500)
})
$(window).scroll(function(){
if($(window).scrollTop()>150){
$(".nav").css({"position":"fixed","top":"0px"})
}
else{
$(".nav").css({"position":"absolute","top":"150px"})
}
for(var x=0;x<8;x++){
var i=150+x*500
if($(window).scrollTop()>i && $(window).scrollTop()<i+500){
$(".nav ul li").eq(x).addClass("active").siblings().removeClass("active")}
}
})
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
別踩白塊是一款簡單易上手的數(shù)字小游戲,下面這篇文章主要給大家介紹了關(guān)于使用jquery實現(xiàn)別踩白塊小游戲的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
position()函數(shù)用于返回當(dāng)前匹配元素相對于其被定位的祖輩元素的偏移，也就是相對于被定位的祖輩元素的坐標(biāo)。該函數(shù)只對可見元素有效。2015-07-07
jQuery+css實現(xiàn)的換頁標(biāo)簽欄效果
這篇文章主要介紹了jQuery+css實現(xiàn)的換頁標(biāo)簽欄效果,涉及jQuery動態(tài)操作頁面元素構(gòu)造換頁標(biāo)簽的相關(guān)技巧,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了jquery實現(xiàn)的淡入淡出下拉菜單效果,涉及jquery操作頁面屬性的動態(tài)添加與刪除相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這是一個加了點淡入淡出效果的頂部tooltip控件，會自動消失,小功能大家參考使用吧2013-12-12
內(nèi)容過濾選擇器：根據(jù)元素中的文字內(nèi)容或所包含的子元素特征獲取元素，其文字內(nèi)容可以模糊或絕對匹配進(jìn)行元素定位，接下來為大家詳細(xì)介紹下jQuery選擇器，感興趣的朋友可以參考下哈2013-04-04
jquery禁止輸入數(shù)字以外的字符的示例(純數(shù)字驗證碼)
這篇文章主要介紹了jquery禁止輸入數(shù)字以外的字符的示例(純數(shù)字驗證碼),需要的朋友可以參考下2014-04-04
這篇文章主要介紹了jQuery Form表單取值的方法，之前js取form表單的值都是一個一個的取，數(shù)量一多之后容易出錯而且煩透了。具體jq form表單取值方法，大家通過本文學(xué)習(xí)下吧2017-01-01
我們看到很多網(wǎng)站會有有錯誤404頁面，當(dāng)頁面不存存時就會提示，然后過幾秒就會自動跳到首頁了，下面我來給大家舉一個404錯誤頁面跳到首頁實例，有需要的朋友可以參考一下2013-08-08
jQuery學(xué)習(xí)筆記之 Ajax操作篇（二） - 數(shù)據(jù)傳遞
在前一篇介紹 jQuery Ajax 的數(shù)據(jù)加載中的例子都是從靜態(tài)的文件中取得數(shù)據(jù)，而 Ajax 更大的價值在于與后端服務(wù)器進(jìn)行數(shù)據(jù)傳遞，動態(tài)地請求和發(fā)送數(shù)據(jù)。2014-06-06