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 |