jQuery实现网页定位滚动导航条

实际效果

实现原理

主要知识点
滚动事件:scroll

当用户滚动指定的元素时,会发生 scroll 事件。

jQuery 代码:

Select Code
1
$(window).scroll( function() { /* ...do something... */ } );

find()

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

位置

  • scrollTop:获取匹配元素相对滚动条顶部的偏移。
  • offset:获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性:top 和 left。此方法只对可见元素有效。

attr()

设置或返回被选元素的属性值。

css类

  • addClass:为每个匹配的元素添加指定的类名。
  • removeClass:从所有匹配的元素中删除全部或者指定的类。

HTML结构

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<div id="menu">
<ul>
 	<li><a class="current" href="#item1">1F 男装</a></li>
 	<li><a href="#item2">2F 女装</a></li>
 	<li><a href="#item3">3F 美妆</a></li>
 	<li><a href="#item4">4F 数码</a></li>
 	<li><a href="#item5">5F 母婴</a></li>
</ul>
</div>
<div id="content">
<h1>美丽说</h1>
<div id="item1" class="item">
<h2>1F 男装</h2>
<ul>
 	<li><a href="#"><img src="1F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="1F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="1F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="1F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="1F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="1F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="1F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="1F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="1F.jpg" alt="" /></a></li>
</ul>
</div>
<div id="item2" class="item">
<h2>2F 女装</h2>
<ul>
 	<li><a href="#"><img src="2F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="2F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="2F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="2F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="2F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="2F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="2F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="2F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="2F.jpg" alt="" /></a></li>
</ul>
</div>
<div id="item3" class="item">
<h2>3F 美妆</h2>
<ul>
 	<li><a href="#"><img src="3F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="3F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="3F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="3F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="3F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="3F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="3F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="3F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="3F.jpg" alt="" /></a></li>
</ul>
</div>
<div id="item4" class="item">
<h2>4F 数码</h2>
<ul>
 	<li><a href="#"><img src="4F.png" alt="" /></a></li>
 	<li><a href="#"><img src="4F.png" alt="" /></a></li>
 	<li><a href="#"><img src="4F.png" alt="" /></a></li>
 	<li><a href="#"><img src="4F.png" alt="" /></a></li>
 	<li><a href="#"><img src="4F.png" alt="" /></a></li>
 	<li><a href="#"><img src="4F.png" alt="" /></a></li>
 	<li><a href="#"><img src="4F.png" alt="" /></a></li>
 	<li><a href="#"><img src="4F.png" alt="" /></a></li>
 	<li><a href="#"><img src="4F.png" alt="" /></a></li>
</ul>
</div>
<div id="item5" class="item">
<h2>5F 母婴</h2>
<ul>
 	<li><a href="#"><img src="5F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="5F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="5F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="5F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="5F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="5F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="5F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="5F.jpg" alt="" /></a></li>
 	<li><a href="#"><img src="5F.jpg" alt="" /></a></li>
</ul>
</div>
</div>

JS部分

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
    $(document).ready(function () {
        $(window).scroll(function () {
            var items = $("#content").find(".item");
            var menu = $("#menu");
            var top = $(document).scrollTop();
            var currentId = "";
            items.each(function () {
                var m = $(this);
                if (top > m.offset().top  - 100) {
                    currentId = "#" + m.attr("id");
                } else {
                    return false;
                }
            });

            var currentLink = menu.find(".current");
            if (currentId && currentLink.attr("href") != currentId) {
                currentLink.removeClass("current");
                menu.find("[href=" + currentId + "]").addClass("current");
            }
        });
    })
</script>