jQuery实现电梯导航特效

功能描述:

  当滚动条滑到某个位置时,显示电梯导航; 

  当用户滚动滚动条时,让电梯导航的选中状态和当前滚动到的区域保持一致;

  当用户点击电梯导航时,滚动条滚动到被点击导航对应的区域

准备工作:

首先将jQuery文件以及你自己的js文件引入你的html里,jq文件要放在上面

<script src="js/jquery.min.js">script>
<script src="js/index.js">script>

HTML代码:

 1 <body>
 2     <div class="slider-bar">
 3         <ul>
 4             <li>头部区域li>
 5             <li class="current">导航区域li>
 6             <li>第一部分li>
 7             <li>第二部分li>
 8             <li>第三部分li>
 9             <li>底部区域li>
10         ul>
11     div>
12     <div class="header w">头部区域div>
13     <div class="banner w">banner区域div>
14     <div class="main w">主体部分1div>
15     <div class="main w">主体部分2div>
16     <div class="main w">主体部分2div>
17     <div class="footer w">footer部分div>
18 body>
 1 
CSS样式代码

 

具体功能实现:

1. 当用户滑动到banner区域时,显示电梯导航。封装成一个函数toggleTool()

1 function toggleTool() {
2     if($(document).scrollTop() > $(".banner").offset().top - 1) {
3         $(".slider-bar").fadeIn();  // fadeIn()淡入(显示)
4     } else {
5         $(".slider-bar").fadeOut(); // fadeOut()淡出(隐藏)
6     }
7 }

2. each()遍历所有模块,让电梯导航的选中状态和对应模块区域保持一致。封装成一个函数eachTool()

如果滚动上去的高度($(document).scrollTop())大于模块距离文档顶部的距离($(ele).offset().top),说明滚动到了相应模块。给对应的电梯导航添加current类(选中状态),并移除其他导航的current类;

但是如果footer部分太短,那footer对应的导航永远也不会成选中状态,所以要再写一个判断,判断是否滚动到底部;

(滚上去的高度)+(当前窗口的高度)>=(整个文档的高度)时说明滚动到了底部,给footer添加current 并移除其他current

 1 function eachTool() {
 2     if(flag) {  // flag互斥锁 当它为true时才执行里边的代码
 3         $(".w").each(function(i, ele) {   // i是索引,ele是遍历对象
 4             // 减1是为了解决一个小bug
 5             if($(document).scrollTop() > $(ele).offset().top - 1) {
 6                 // 给对应导航添加current类,并移除其他导航的current类(li里就这一个类,写不写上current都行)
 7                 $(".slider-bar li").eq(i).addClass("current").siblings().removeClass();
 8             } else if($(window).scrollTop() + $(window).height() >= $(document).height() - 1) {
 9                 // 当页面滚到底部时,给footer对应的导航添加current类
10                 var footIndex = $(".slider-bar li").length - 1;
11                 $(".slider-bar li").eq(footIndex).addClass("current").siblings().removeClass();
12             }
13         })
14     }
15 }

给window对象绑定滚动事件,当页面滚动时调用上面那两个函数;

当然,为了防止用户刷新页面时导航条显示不正确,所以当页面加载完时我们先调用一次

1 toggleTool(); 
2 eachTool();
3 $(window).scroll(function(e) {
4     toggleTool();
5     eachTool();
6 })

3. 用户点击导航,让滚动条滚到对应的区域;

用户点击导航时页面会滚动,就会触发页面滚动事件,会执行eachTool()里的背景选择(选中状态),所以点击导航后先让flag改为false,禁止执行eachTool()里的内容;

获取用户当前点击的li的索引index,正好对应的就是相应模块的索引,知道了是哪个模块 就可以算出这个模块距离文档顶部的距离。调用动画函数animate()让滚动条滚动到这个高度;

执行完动画后要把flag改为true,不然flag永远是false,就没办法执行eachTool()里的内容

 1 $(".slider-bar li").click(function(e) {
 2     flag = false;
 3     // 将模块距离顶部的高度,赋值给current
 4     var current = $(".w").eq($(this).index()).offset().top;  // $(".w").eq(index) 选择器,选择第几个元素
 5     $("html").stop().animate({  // 调用动画前先stop()停止其他未完成的动画(解决排队问题)
 6         scrollTop: current
 7     }, function() {   // 回调函数,动画完成后执行
 8         flag = true;
 9     })
10     // 点击添加current类(选中状态) 并移除兄弟节点的current类
11     $(this).addClass("current").siblings().removeClass();
12 })

 

完整JavaScript代码:

 1 $(function() {
 2     // 节流阀(互斥锁) 用来解决一个小bug(当用户点击导航条时,页面滚动会触发eachTool()里的内容,当我们点击时不需要触发eachTool())
 3     var flag = true;
 4     // 当用户滑动到banner区域,显示电梯导航。封装成一个函数toggleTool()
 5     function toggleTool() {
 6         if($(document).scrollTop() > $(".banner").offset().top - 1) {
 7             $(".slider-bar").fadeIn();  // fadeIn()淡入(显示)
 8         } else {
 9             $(".slider-bar").fadeOut(); // fadeOut()淡出(隐藏)
10         }
11     }
12     // each()遍历所有模块,让电梯导航和对应模块保持一致。封装成一个函数eachTool()
13     function eachTool() {
14         if(flag) {
15             $(".w").each(function(i, ele) {   // i是索引,ele是遍历对象
16                 // 如果滚动上去的高度大于模块距离文档顶部的距离,说明滚动到了相应模块(减1是为了解决一个小bug)
17                 if($(document).scrollTop() > $(ele).offset().top - 1) {
18                     // 给对应的电梯导航添加current类,并移除兄弟的current类(li里就这一个类,写不写上current都行)
19                     $(".slider-bar li").eq(i).addClass("current").siblings().removeClass();
20                 // 如果footer部分太短,那footer对应的导航永远也不会亮了,所以要再写一个判断↓判断是否滚动到底部
21                 } else if($(window).scrollTop() + $(window).height() >= $(document).height() - 1) {
22                     // 当页面滚到底部时,给footer对应的导航添加current类
23                     var footIndex = $(".slider-bar li").length - 1;
24                     $(".slider-bar li").eq(footIndex).addClass("current").siblings().removeClass();
25                 }
26             })
27         }
28     }
29     // 先调用两个函数,以防用户刷新页面后不显示
30     toggleTool(); 
31     eachTool();
32     $(window).scroll(function(e) {
33         toggleTool();
34         eachTool();
35     })
36 
37     // 用户点击导航,让滚动条滚到相应模块
38     $(".slider-bar li").click(function(e) {
39         // 点击li页面也会滚动,就会触发页面滚动事件,会执行eachTool()里的背景选择
40         // 所以点击li后让flag为false,禁止执行eachTool()里的内容
41         flag = false;
42         // $(this).index()获取用户当前点击的li的索引,正好对应的就是相应模块索引
43         // 得到相应模块索引就可以算出这个模块距离顶部的高度,赋值给current
44         var current = $(".w").eq($(this).index()).offset().top;  // $(".w").eq(index) 选择器,选择第几个元素
45         $("html").stop().animate({  // 调用动画前先stop()停止其他未完成的动画(解决排队问题)
46             scrollTop: current
47         }, function() {   // 回调函数,动画执行完后执行
48             flag = true;   // 让flag变为true,不然flag永远是false,没办法执行eachTool()里的内容
49         })
50         // 点击添加current类 并移除兄弟节点的current类
51         $(this).addClass("current").siblings().removeClass();
52     })
53 })

 

你可能感兴趣的:(jQuery实现电梯导航特效)