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

更新时间：2012年05月24日 20:20:56 作者：

在淘宝购物的时候，发现里面有一个菜单，是查看“评论，物品信息”等的一个菜单。由于页面太长，所以它做了一个菜单定位

自己试着写了下：

 
$(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下载：https://www.jb51.net/jiaoben/45053.html

您可能感兴趣的文章:

jQuery中:file选择器用法实例
这篇文章主要介绍了jQuery中:file选择器用法,实例分析了:file选择器的功能、定义及选取类型为file的<input>元素的使用技巧,需要的朋友可以参考下
2015-01-01
jquery 插件 web2.0分格的分页脚本，可用于ajax无刷新分页
displaynum，displaylastNum可以自由定制显示的页码数量
2008-12-12
jquery validate demo 基础
本文通过一段jquery代码给大家详解jquery validate基础，本文代码简单，非常具有参考借鉴价值，感兴趣的朋友一起参考下
2015-10-10
jQuery扩展+xml实现表单验证功能的方法
这篇文章主要介绍了jQuery扩展+xml实现表单验证功能的方法,涉及jQuery操作xml格式数据及表单验证相关操作技巧,需要的朋友可以参考下
2016-12-12
Jquery中的offset()和position()深入剖析
jquery 中有两个获取元素位置的方法offset()和position()，这两个方法之间有什么异同？使用的时候应该注意哪些问题？什么时候使用offset(),什么时候又使用position()呢？
2009-05-05
jquery事件机制扩展插件 jquery鼠标右键事件。
因为最近技术长进缓慢，也没高手带，只能靠自己了，所以想仿个WEBQQ来锻炼下自己。做之前最好先把必要的东西准备好
2011-12-12
jQuery 实现扁平式小清新导航
这篇文章主要介绍了jQuery 实现扁平式小清新导航，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下
2020-07-07
非常棒的10款jQuery 幻灯片插件
这篇文章与大家分享的是10款非常棒的 jQuery 幻灯片插件，使用这些插件可以帮助你在网站中加入非常吸引人的幻灯片效果，另外这些插件还有制作教程。
2011-06-06
jquery tab插件制作实现代码
jquery插件丰富，很多都是很好用的，最近学习了一下如何制作jquery插件，发现jquery插件制作其实很简单，这里介绍一下。
2010-06-06
jQuery实现文档树效果
本文主要分享了jQuery实现文档树效果的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02