时间:2021-05-26
自己试着写了下:
复制代码 代码如下:
$(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
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了jQuery实现浮动层随浏览器滚动条滚动的方法。分享给大家供大家参考。具体如下:这是jQuery实现的一个浮动层效果,随浏览器滚动条而滚动,并一直
本文实例讲述了jQuery实现固定在网页顶部的菜单效果代码。分享给大家供大家参考。具体如下:这是一款基于jQuery的固定在页面顶部的菜单,获取要定位元素距离浏
许多用惯了chrome浏览器的朋友初用360安全浏览器,可能会感到不习惯。别的好说,就是它那个界面看着别扭,且不说项目繁多吧,顶部的菜单条和收藏夹占用了不少空间
本文实例讲述了jQuery实现可关闭固定于底(顶)部的工具条菜单效果。分享给大家供大家参考,具体如下:这是一款可关闭始终在页面底部的工具条菜单,浮动在页面顶部的
positon:fixed让HTML元素脱离文档流固定在浏览器的某个位置网页中经常会有浮动的导航条会用到这种定位模式,但是ie6下并不兼容这种定位浮动导航条的样