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


Posted in Javascript onMay 24, 2012

自己试着写了下:

$(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.3water.com/js/2012/myfix/
DEMO下载:https://3water.com/jiaoben/45053.html

Javascript 相关文章推荐
同时使用n个window onload加载实例介绍
Apr 25 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
如何使用angularJs
May 08 Javascript
jquery+css实现侧边导航栏效果
Jun 12 jQuery
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
详解Vue.js v-for不支持IE9的解决方法
Dec 29 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
Feb 27 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
May 24 #Javascript
js动态在form上插入enctype=multipart/form-data的问题
May 24 #Javascript
javascript中关于break,continue的特殊用法与介绍
May 24 #Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
May 24 #Javascript
JavaScript之编码规范 推荐
May 23 #Javascript
javascript的数据类型、字面量、变量介绍
May 23 #Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 #Javascript
You might like
环境会对咖啡种植有什么影响
2021/03/03 咖啡文化
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
php PDO判断连接是否可用的实现方法
2017/04/03 PHP
ie支持function.bind()方法实现代码
2012/12/27 Javascript
利用js读取动态网站从服务器端返回的数据
2014/02/10 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
各式各样的导航条效果css3结合jquery代码实现
2016/09/17 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
2017/02/27 Javascript
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
JavaScript实现表单注册、表单验证、运算符功能
2018/10/15 Javascript
javascript防抖函数debounce详解
2019/06/11 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
编程输出如下图形
2013/11/24 面试题
最新奶茶店创业计划书范文
2014/02/08 职场文书
承诺书怎么写
2014/03/26 职场文书
交通事故调解协议书
2014/04/16 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
办公室主任岗位职责
2015/01/31 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
《水上飞机》教学反思
2016/02/20 职场文书
Python基础之字符串格式化详解
2021/04/21 Python
压缩Redis里的字符串大对象操作
2021/06/23 Redis
优化Mysql查询的示例
2022/04/26 MySQL