DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery 菜單隨滾條改為以定位方式(固定要浏覽器頂部)
jQuery 菜單隨滾條改為以定位方式(固定要浏覽器頂部)
編輯:JQuery特效代碼     
自己試著寫了下:
. 代碼如下:
$(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.當這個元素進入可視區域後,然後要離開可視區域的時候,就改變定位方式。
  2.當元素回離浏覽器頂部最初高度時,再還原其定位方式l
在線演示:http://demo.jb51.net/js/2012/myfix/
DEMO下載:http://www.jb51.net/jiaoben/45053.html
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved