jQuery 菜單隨滾條改為以定位方式(固定要瀏覽器頂部)
更新時間:2012年05月24日 20:20:56 作者:
在淘寶購物的時候,發(fā)現(xiàn)里面有一個菜單,是查看“評論,物品信息”等的一個菜單。由于頁面太長,所以它做了一個菜單定位
自己試著寫了下:
$(function(){
//獲取要定位元素距離瀏覽器頂部的距離
var navH = $(".nav").offset().top;
//滾動條事件
$(window).scroll(function(){
//獲取滾動條的滑動距離
var scroH = $(this).scrollTop();
//滾動條的滑動距離大于等于定位元素距離瀏覽器頂部的距離,就固定,反之就不固定
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.當這個元素進入可視區(qū)域后,然后要離開可視區(qū)域的時候,就改變定位方式。
2.當元素回離瀏覽器頂部最初高度時,再還原其定位方式l
在線演示:http://demo.jb51.net/js/2012/myfix/
DEMO下載:http://www.dbjr.com.cn/jiaoben/45053.html
復制代碼 代碼如下:
$(function(){
//獲取要定位元素距離瀏覽器頂部的距離
var navH = $(".nav").offset().top;
//滾動條事件
$(window).scroll(function(){
//獲取滾動條的滑動距離
var scroH = $(this).scrollTop();
//滾動條的滑動距離大于等于定位元素距離瀏覽器頂部的距離,就固定,反之就不固定
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.當這個元素進入可視區(qū)域后,然后要離開可視區(qū)域的時候,就改變定位方式。
2.當元素回離瀏覽器頂部最初高度時,再還原其定位方式l
在線演示:http://demo.jb51.net/js/2012/myfix/
DEMO下載:http://www.dbjr.com.cn/jiaoben/45053.html
您可能感興趣的文章:
- jQuery實現(xiàn)可高亮顯示的二級CSS菜單效果
- 基于jquery實現(xiàn)導航菜單高亮顯示(兩種方法)
- jQuery實現(xiàn)點擊后標記當前菜單位置(背景高亮菜單)效果
- jQuery+CSS3實現(xiàn)仿花瓣網(wǎng)固定頂部位置帶懸浮效果的導航菜單
- jQuery實現(xiàn)可關閉固定于底(頂)部的工具條菜單效果
- jQuery實現(xiàn)固定在網(wǎng)頁頂部的菜單效果代碼
- jquery固定底網(wǎng)站底部菜單效果
- jQuery實現(xiàn)帶延時功能的水平多級菜單效果【附demo源碼下載】
- jQuery實現(xiàn)點擊后高亮背景固定顯示的菜單效果【附demo源碼下載】
相關文章
jquery 插件 web2.0分格的分頁腳本,可用于ajax無刷新分頁
displaynum,displaylastNum可以自由定制顯示的頁碼數(shù)量2008-12-12Jquery中的offset()和position()深入剖析
jquery 中有兩個獲取元素位置的方法offset()和position(),這兩個方法之間有什么異同?使用的時候應該注意哪些問題?什么時候使用offset(),什么時候又使用position()呢?2009-05-05