jQuery 菜單隨滾條改為以定位方式(固定要瀏覽器頂部)
更新時(shí)間：2012年05月24日 20:20:56 作者：
在淘寶購(gòu)物的時(shí)候，發(fā)現(xiàn)里面有一個(gè)菜單，是查看“評(píng)論，物品信息”等的一個(gè)菜單。由于頁(yè)面太長(zhǎng)，所以它做了一個(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.fzitv.net/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.fzitv.net/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)頁(yè)頂部的菜單效果代碼
- jquery固定底網(wǎng)站底部菜單效果
- jQuery實(shí)現(xiàn)帶延時(shí)功能的水平多級(jí)菜單效果【附demo源碼下載】
- jQuery實(shí)現(xiàn)點(diǎn)擊后高亮背景固定顯示的菜單效果【附demo源碼下載】
相關(guān)文章
本文給大家分享的是使用jQuery制作的模仿百度時(shí)間軸特效的代碼，效果非常不錯(cuò)，有需要的小伙伴可以參考下。2015-07-07
jquery $(this).attr $(this).val方法使用介紹
$(this).attr(key); 獲取節(jié)點(diǎn)屬性名的值，相當(dāng)于getAttribute(key)方法，本文整理了一些相關(guān)的示例，感興趣的朋友可以參考下2013-10-10
模仿jQuery each函數(shù)的鏈?zhǔn)秸{(diào)用
模仿jQuery each函數(shù)的鏈?zhǔn)秸{(diào)用實(shí)現(xiàn)代碼。2009-07-07
jQuery探測(cè)位置的提示彈窗(toolTip box)詳細(xì)解析
提示彈窗（toolTip box）經(jīng)常會(huì)被用到，但是本文總要的不是彈，也不是窗，而是探測(cè)位置，在適當(dāng)?shù)牡胤綇棿?。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
jquery點(diǎn)擊改變class并toggle的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇jquery點(diǎn)擊改變class并toggle的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
Jquery autocomplete是一個(gè)很強(qiáng)大的類似google suggest的自動(dòng)提示插件。它幾乎可以滿足我們所有的需要。2010-04-04
checkbox想必大家對(duì)這個(gè)控件并不陌生吧，畢竟在網(wǎng)頁(yè)制作過(guò)程中經(jīng)常會(huì)使用到，下面與大家分享個(gè)示例主要介紹checkbox的使用，感興趣的朋友可以參考下2013-08-08
jquery checkbox無(wú)法用attr()二次勾選問(wèn)題的解決方法
下面小編就為大家?guī)?lái)一篇jquery checkbox無(wú)法用attr()二次勾選問(wèn)題的解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
11個(gè)用于提高排版水平的基于jquery的文字效果插件
我們都知道，在傳統(tǒng)的排版當(dāng)中使用DIV+CSS來(lái)實(shí)現(xiàn)的話是很困難的，今天使用jquery插件，你可以實(shí)現(xiàn)卓越的排版效果，專門用于為您提高您的排版水平2012-09-09
詳解jQuery UI庫(kù)中文本輸入自動(dòng)補(bǔ)全功能的用法
這篇文章主要介紹了詳解jQuery UI庫(kù)中文本輸入自動(dòng)補(bǔ)全功能的用法,其中重點(diǎn)講解了常用的郵箱地址輸入時(shí)后綴自動(dòng)補(bǔ)全功能的使用,需要的朋友可以參考下2016-04-04