jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)

231 阅读 0 评论 153 点赞

我是靠谱客的博主默默哑铃，最近开发中收集的这篇文章主要介绍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.uoften.com/js/2012/myfix/
DEMO下载：http://www.uoften.com/jiaoben/45053.html