·您当前的位置:主页 > 技术教程 > JavaScript >

[JS]js如何做导航菜单栏随着屏幕的滚动变化效果(附源代码)

时间:2019-08-13 13:36cuplayer.com
[JS]js如何做导航菜单栏随着屏幕的滚动变化效果(附源代码)

[JS]js如何做导航菜单栏随着屏幕的滚动变化效果(附源代码)

  1. $(window).scroll(function () { 
  2.             var $nav = $(".floatingMenu ul li"), 
  3.                 length = $nav.length-1,//获取导航菜单 ul li 的个数 
  4.                 item = new Array(),//新建一个数组 
  5.                 sTop = $(window).scrollTop();//获取偏移的高度 
  6.             for (var i = 0; i < length; i++) { 
  7.                 if (i == 0) { 
  8.                     item[i + 1] = $(".blockList>div:first-child").offset().top; 
  9.                     if (sTop >= item[i + 1]) { 
  10.                         $nav.eq(i).addClass("selected").siblings("li").removeClass("selected");//选中的样式selected 
  11.                     } 
  12.                 } else { 
  13.                     item[i + 1] = $(".blockList>div:nth-child(" + (i + 1) + ")").offset().top; 
  14.                     if (sTop >= item[i + 1] - 100) { 
  15.                         $nav.eq(i).addClass("selected").siblings("li").removeClass("selected"); 
  16.                     } 
  17.                 } 
  18.             } 
  19.         }) 

 

热门文章推荐

请稍候...