jQuery 菜單隨滾條改為以定位方式(固定要瀏覽器頂部)
更新時(shí)間：2012年05月24日 20:20:56 作者：
在淘寶購物的時(shí)候，發(fā)現(xiàn)里面有一個(gè)菜單，是查看“評(píng)論，物品信息”等的一個(gè)菜單。由于頁面太長，所以它做了一個(gè)菜單定位
自己試著寫了下：
$(function(){
//獲取要定位元素距離瀏覽器頂部的距離
var navH = $(".nav").offset().top;
//滾動(dòng)條事件
$(window).scroll(function(){
//獲取滾動(dòng)條的滑動(dòng)距離
var scroH = $(this).scrollTop();
//滾動(dòng)條的滑動(dòng)距離大于等于定位元素距離瀏覽器頂部的距離，就固定，反之就不固定
if(scroH>=navH){
$(".nav").css({"position":"fixed","top":0,"left":"50%","margin-left":"-200px"});
}else if(scroH<navH){
$(".nav").css({"position":"static","margin":"0 auto"});
}
})
})
主要思路
1.當(dāng)這個(gè)元素進(jìn)入可視區(qū)域后，然后要離開可視區(qū)域的時(shí)候，就改變定位方式。
2.當(dāng)元素回離瀏覽器頂部最初高度時(shí)，再還原其定位方式l
在線演示：http://demo.jb51.net/js/2012/myfix/
DEMO下載：http://www.dbjr.com.cn/jiaoben/45053.html
復(fù)制代碼 代碼如下:
$(function(){
//獲取要定位元素距離瀏覽器頂部的距離
var navH = $(".nav").offset().top;
//滾動(dòng)條事件
$(window).scroll(function(){
//獲取滾動(dòng)條的滑動(dòng)距離
var scroH = $(this).scrollTop();
//滾動(dòng)條的滑動(dòng)距離大于等于定位元素距離瀏覽器頂部的距離，就固定，反之就不固定
if(scroH>=navH){
$(".nav").css({"position":"fixed","top":0,"left":"50%","margin-left":"-200px"});
}else if(scroH<navH){
$(".nav").css({"position":"static","margin":"0 auto"});
}
})
})
主要思路
1.當(dāng)這個(gè)元素進(jìn)入可視區(qū)域后，然后要離開可視區(qū)域的時(shí)候，就改變定位方式。
2.當(dāng)元素回離瀏覽器頂部最初高度時(shí)，再還原其定位方式l
在線演示：http://demo.jb51.net/js/2012/myfix/
DEMO下載：http://www.dbjr.com.cn/jiaoben/45053.html
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)可高亮顯示的二級(jí)CSS菜單效果
- 基于jquery實(shí)現(xiàn)導(dǎo)航菜單高亮顯示（兩種方法）
- jQuery實(shí)現(xiàn)點(diǎn)擊后標(biāo)記當(dāng)前菜單位置(背景高亮菜單)效果
- jQuery+CSS3實(shí)現(xiàn)仿花瓣網(wǎng)固定頂部位置帶懸浮效果的導(dǎo)航菜單
- jQuery實(shí)現(xiàn)可關(guān)閉固定于底（頂）部的工具條菜單效果
- jQuery實(shí)現(xiàn)固定在網(wǎng)頁頂部的菜單效果代碼
- jquery固定底網(wǎng)站底部菜單效果
- jQuery實(shí)現(xiàn)帶延時(shí)功能的水平多級(jí)菜單效果【附demo源碼下載】
- jQuery實(shí)現(xiàn)點(diǎn)擊后高亮背景固定顯示的菜單效果【附demo源碼下載】
相關(guān)文章
這篇文章主要介紹了jQuery中:file選擇器用法,實(shí)例分析了:file選擇器的功能、定義及選取類型為file的<input>元素的使用技巧,需要的朋友可以參考下2015-01-01
jquery 插件 web2.0分格的分頁腳本，可用于ajax無刷新分頁
displaynum，displaylastNum可以自由定制顯示的頁碼數(shù)量2008-12-12
本文通過一段jquery代碼給大家詳解jquery validate基礎(chǔ)，本文代碼簡單，非常具有參考借鑒價(jià)值，感興趣的朋友一起參考下2015-10-10
jQuery擴(kuò)展+xml實(shí)現(xiàn)表單驗(yàn)證功能的方法
這篇文章主要介紹了jQuery擴(kuò)展+xml實(shí)現(xiàn)表單驗(yàn)證功能的方法,涉及jQuery操作xml格式數(shù)據(jù)及表單驗(yàn)證相關(guān)操作技巧,需要的朋友可以參考下2016-12-12
Jquery中的offset()和position()深入剖析
jquery 中有兩個(gè)獲取元素位置的方法offset()和position()，這兩個(gè)方法之間有什么異同？使用的時(shí)候應(yīng)該注意哪些問題？什么時(shí)候使用offset(),什么時(shí)候又使用position()呢？2009-05-05
jquery事件機(jī)制擴(kuò)展插件 jquery鼠標(biāo)右鍵事件。
因?yàn)樽罱夹g(shù)長進(jìn)緩慢，也沒高手帶，只能靠自己了，所以想仿個(gè)WEBQQ來鍛煉下自己。做之前最好先把必要的東西準(zhǔn)備好2011-12-12
jQuery 實(shí)現(xiàn)扁平式小清新導(dǎo)航
這篇文章主要介紹了jQuery 實(shí)現(xiàn)扁平式小清新導(dǎo)航，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
這篇文章與大家分享的是10款非常棒的 jQuery 幻燈片插件，使用這些插件可以幫助你在網(wǎng)站中加入非常吸引人的幻燈片效果，另外這些插件還有制作教程。2011-06-06
jquery插件豐富，很多都是很好用的，最近學(xué)習(xí)了一下如何制作jquery插件，發(fā)現(xiàn)jquery插件制作其實(shí)很簡單，這里介紹一下。2010-06-06
本文主要分享了jQuery實(shí)現(xiàn)文檔樹效果的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02