jQuery 菜單隨滾條改為以定位方式(固定要瀏覽器頂部)

更新時(shí)間：2012年05月24日 20:20:56 作者：

在淘寶購(gòu)物的時(shí)候，發(fā)現(xiàn)里面有一個(gè)菜單，是查看“評(píng)論，物品信息”等的一個(gè)菜單。由于頁(yè)面太長(zhǎng)，所以它做了一個(gè)菜單定位

自己試著寫(xiě)了下：

 
$(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ū)域后，然后要離開(kāi)可視區(qū)域的時(shí)候，就改變定位方式。
　　2.當(dāng)元素回離瀏覽器頂部最初高度時(shí)，再還原其定位方式l
在線演示：http://demo.jb51.net/js/2012/myfix/
DEMO下載：http://www.dhdzp.com/jiaoben/45053.html

您可能感興趣的文章:

相關(guān)文章

jQuery時(shí)間軸插件使用詳解
本文給大家分享的是使用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)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
JQuery autocomplete 使用手冊(cè)
Jquery autocomplete是一個(gè)很強(qiáng)大的類似google suggest的自動(dòng)提示插件。它幾乎可以滿足我們所有的需要。
2010-04-04
checkbox使用示例
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)題的解決方法。小編覺(jué)得挺不錯(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)卓越的排版效果，專門(mé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