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.glzy8.com/js/2012/myfix/

  DEMO下载:http://www.glzy8.com/jiaoben/45053.html