页面滚动时固定菜单栏

最新推荐文章于 2025-12-06 22:07:37 发布
原创 最新推荐文章于 2025-12-06 22:07:37 发布 · 103 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#xhtml #前端 #ui #javascript #html

本文介绍了一种使用JavaScript实现的页面滚动时固定菜单栏的方法，适用于多种浏览器，包括IE、Chrome和Firefox。

往下拖动页面滚动条时，固定住菜单栏(不随其他内容网上滚动，兼容各版本IE、Chrome、Firefox)

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181

  
 
<!DOCTYPE&nbsp;html&nbsp;PUBLIC&nbsp;"-//W3C//DTD&nbsp;XHTML&nbsp;1.0&nbsp;Transitional//EN"&nbsp;"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">&nbsp;&nbsp;
<html&nbsp;xmlns="http://www.w3.org/1999/xhtml">&nbsp;&nbsp;
&nbsp;&nbsp;<head>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;<meta&nbsp;http-equiv="Content-Type"&nbsp;content="text/html;charset=utf-8"&nbsp;/>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<script>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;定义菜单栏离页面顶部的距离，默认为200&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;divOffsetTop&nbsp;=&nbsp;200;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//滚动事件&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.onscroll=function(){&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;div&nbsp;=&nbsp;document.getElementById("divId");&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;计算页面滚动了多少(需要区分不同浏览器)&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;topVal&nbsp;=&nbsp;0;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(window.pageYOffset){//这一条滤去了大部分，&nbsp;只留了IE678&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;topVal&nbsp;=&nbsp;window.pageYOffset;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;if(document.documentElement.scrollTop&nbsp;){//IE678&nbsp;的非quirk模式&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;topVal&nbsp;=&nbsp;document.documentElement.scrollTop;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;if(document.body.scrolltop){//IE678&nbsp;的quirk模式&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;topVal&nbsp;=&nbsp;document.body.scrolltop;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(topVal&nbsp;<=&nbsp;divOffsetTop){&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;div.style.position&nbsp;=&nbsp;"";&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;{&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;div.style.position&nbsp;=&nbsp;"fixed";&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;页面加载完之后，计算菜单栏到页面顶部的实际距离&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.onload=function(){&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;div&nbsp;=&nbsp;document.getElementById("divId");&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;divOffsetTop&nbsp;=&nbsp;div.offsetTop;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</script>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;</head>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;<body>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="divId"&nbsp;style="width:&nbsp;500px;&nbsp;height:&nbsp;40px;&nbsp;line-height:&nbsp;40px;&nbsp;top:&nbsp;0px;&nbsp;background:&nbsp;pink">假设这是菜单栏，在页面往下滚动时它会固定住</div>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;</body>&nbsp;&nbsp;
</html>&nbsp;&nbsp;

   <!DOCTYPE&nbsp;html&nbsp;PUBLIC&nbsp;"-//W3C//DTD&nbsp;XHTML&nbsp;1.0&nbsp;Transitional//EN"&nbsp;"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">&nbsp;&nbsp; <html&nbsp;xmlns="http://www.w3.org/1999/xhtml">&nbsp;&nbsp; &nbsp;&nbsp;<head>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;<meta&nbsp;http-equiv="Content-Type"&nbsp;content="text/html;charset=utf-8"&nbsp;/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<script>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;定义菜单栏离页面顶部的距离，默认为200&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;divOffsetTop&nbsp;=&nbsp;200;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//滚动事件&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.οnscrοll=function(){&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;div&nbsp;=&nbsp;document.getElementById("divId");&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;计算页面滚动了多少(需要区分不同浏览器)&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;topVal&nbsp;=&nbsp;0;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(window.pageYOffset){//这一条滤去了大部分，&nbsp;只留了IE678&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;topVal&nbsp;=&nbsp;window.pageYOffset;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;if(document.documentElement.scrollTop&nbsp;){//IE678&nbsp;的非quirk模式&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;topVal&nbsp;=&nbsp;document.documentElement.scrollTop;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;if(document.body.scrolltop){//IE678&nbsp;的quirk模式&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;topVal&nbsp;=&nbsp;document.body.scrolltop;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(topVal&nbsp;<=&nbsp;divOffsetTop){&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;div.style.position&nbsp;=&nbsp;"";&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;{&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;div.style.position&nbsp;=&nbsp;"fixed";&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;页面加载完之后，计算菜单栏到页面顶部的实际距离&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.οnlοad=function(){&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;div&nbsp;=&nbsp;document.getElementById("divId");&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;divOffsetTop&nbsp;=&nbsp;div.offsetTop;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</script>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;</head>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;<body>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="divId"&nbsp;style="width:&nbsp;500px;&nbsp;height:&nbsp;40px;&nbsp;line-height:&nbsp;40px;&nbsp;top:&nbsp;0px;&nbsp;background:&nbsp;pink">假设这是菜单栏，在页面往下滚动时它会固定住</div>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;aaaaaaaaaaaaaaaaaaaaaaa<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;</body>&nbsp;&nbsp; </html>&nbsp;&nbsp;

珊瑚贝
关注
layui导航栏页面滚动固定_网站建设页面导航如何降低用户寻找的时间
weixin_29947319的博客
12-25 877
做为正确引导客户体验网站的莱单导航栏，从检索视角上而言，也起着关键的功效，莱单导航栏不但联系网站的外界，也联系着网站主页面及其别的网页，是全部网站的“管理中心”，因此网站建设中莱单导航栏设计方案，设计方案的一团糟，让用户用了难受，非常容易让用户外流的。不论是杰出网站设计师还是初学者入行设计人员都了解，为公司网站设计方案一个连贯性的、客户体验友善的网站页面导航作用并非易事。由于它是网页制作行业的一个...
用Axure制作页面滚动时菜单固定在顶部的页面.rp
04-18
用Axure制作页面滚动时菜单固定在顶部的页面 1.在Axure工作区中拖入4个矩形，分别为Head，Tab，content和bottom，其中content长一些 2.复制tab为tab2，坐标x与tab相同，坐标y为0，转化tab2为动态模板，并设置为隐藏 ...
页面滚动式固定左侧菜单栏
cczsmile的博客
04-16 1478
思路 页面滚动时添加.activeFixed固定元素，需要获取scrollY，为了保持左侧菜单不移位，需要获取菜单到左侧的距离offsetLeft。 HTML <!--左侧导航--> <ul class="menu"> <li><a href="#"><b>This year's tuition</b></a&gt...
js实现页面滚动，菜单固定
热门推荐
HELLO WORLD
05-11 1万+
相信大家都遇到过滚动页面需要固定某些内容不跟随页面滚动而滚动的情况，以往项目中也比较多，一直没有分享，今天刚好有空，来做个小分享。 项目需求： 页面处于顶部时右侧“在线客服”静止不动 当页面往下滚动，右侧在线客服悬浮于顶部 页面滚动至最大高度时，右侧在线客服与左侧内容底部对齐，相对静止 思路： 页面处于顶部时只需右浮动即可，滚动超过本身高度时设置fixed使元素块可以固定悬...
Vue添加页面滚动事件实现菜单栏固定定位到页面上
07-10 2639
当页面没有滚动的时候，菜单栏是固定在logo下面的： 当页面滚动超过logo的高度时候，就让菜单栏固定定位到页面顶部：代码实现：
滚动固定导航栏示例
zichenblog的博客
04-23 640
服务</a></li><li><a href="#contact">联系</a></li><li><a href="#about">关于</a></li><li><a href="#home">首页这里是我们提供的服务内容...</p><p>这里是关于我们的内容...</p><p>这里是联系方式...
vue固定菜单栏
weixin_42576804的博客
01-05 790
在 Vue.js 中，可以使用 CSS 的 position: fixed 属性来固定菜单栏。 你可以在菜单栏的样式中添加这个属性： .menu { position: fixed; top: 0; left: 0; right: 0; z-index: 1; } 这样就可以使菜单栏固定在页面顶部，不随滚动条滚动而移动。 注意，如果你想要菜单栏覆盖在其他内容上面，你还需要给它...
特效 scroll页面滚动顶部固定
qq_51130780的博客
12-25 1840
制作网站首页，以及部分侧边栏时，有些时候需要页面滚动，头部或侧边栏固定的需求
html如何实现菜单栏置顶,【CSS】页面滚动，菜单栏悬停怎么实现？
weixin_27923353的博客
06-03 1166
如图当往上滚动，菜单栏滚动到顶部的位置时，再继续滚动，悬停在顶部。问：1、Vue是否有提供这样的控件？2、如果vue没有，有什么现成的一些轮子吗？(最好兼容性好一点，webapp)3、如果现成的轮子也没有，怎么实现？如上，有没有大佬解答下，不胜感激按照 @游龙翔隼的思路已解决，贴上代码：var barOffSetTop = document.getElementById('bar').offset...
固定左侧栏菜单
zichenblog的博客
05-24 386
<i>🔗</i> <span>外部链接</span></a></li><li><a href="#" class="active"><i>🏠</i> <span>首页</span></a></li><li><a href="#"><i>📊</i> <span>仪表盘</span></a></li><li><a href="#"><i>📝</i> <span>文章</span>管理面板
HTML中 css实现滚动页面时固定页面其中一栏的效果
Siona_xin 的博客
11-28 7375
可以为需要固定的元素加上 { position: fixed } 这个 CSS 属性，再通过 top left right bottom 属性调整位置。（1）html中的代码：<!--右侧导航栏--> <div class="navRight"> </div>（2）css样式中的代码：/*右侧导航栏的样式*/ .navRight{ width: 40px; height:
解决Vue页面固定滚动位置的处理办法
08-30
解决这个问题需要了解两个关键点：一是 Vue 页面的滚动固定位置的实现方法，二是浏览器的滚动位置恢复行为。 一、Vue 页面的滚动固定位置的实现方法 在 Vue 项目中，实现滚动固定位置的方法可以分为两个步骤：记录...
jQuery页面滚动显示浮动菜单栏锚点定位效果
09-08
本主题聚焦于利用jQuery实现一个特定的功能——当页面滚动时，展示一个浮动菜单栏，并实现锚点定位效果。这个功能对于提高用户体验，尤其是内容丰富的长页面，是非常有用的，因为它可以帮助用户快速导航到页面的不同...
jQuery页面滚动左侧悬浮固定导航菜单代码
06-05
本资源提供了一种实现“jQuery页面滚动左侧悬浮固定导航菜单”的代码方案，适用于那些希望在用户滚动页面时保持导航菜单始终可见的开发者。 jQuery 是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画...
css页面滚动固定下拉导航菜单特效
06-05
"CSS页面滚动固定下拉导航菜单特效"是一种常见的交互设计技术，它增强了用户体验，特别是对于内容丰富的网站。这种特效使得用户在页面滚动时，导航菜单仍然可见，从而方便用户随时访问各个页面链接。 首先，我们来...
HTML - 换行标签的 3 种写法（＜br＞、＜br/＞、＜br /＞）
weixin_52173250的博客
11-05 321
HTML - 换行标签的 3 种写法（<br>、<br/>、<br />）
Vue 通用复选框组互斥 Hooks：兼容 Element Plus + Ant Design Vue
a3212768093的博客
12-02 861
本文介绍了一个通用的Vue Hooks useExclusiveCheckbox，用于实现复选框组的互斥选择功能。该Hooks兼容ElementPlus和AntDesignVue两大UI库，主要特点包括：跨UI库兼容、轻量无依赖、灵活配置互斥选项值、全场景适配和类型安全。核心逻辑通过对比新旧选中值数组，自动处理互斥选项与其他选项的切换关系。文章提供了完整代码和使用示例，分别演示了在ElementPlus和AntDesignVue中的实现方式，并解答了常见问题。该方案可显著提升开发效率，适用于各类需要互斥选择
深度解析前端input标签：从默认样式覆盖到浏览器自动填充和兼容以及文本域
鹏多多的博客
12-03 995
HTML表单中的<input>标签是核心交互元素，支持多种输入类型（如文本、密码、单选、文件上传等），通过type属性定义不同功能。其核心属性包括数据标识（name/id）、状态控制（disabled/readonly）、验证限制（pattern/maxlength）和交互优化（autofocus/autocomplete）。浏览器默认样式存在兼容性问题，可通过CSS重置实现统一外观，特别是对单选/复选框需要特殊样式覆盖处理。自动填充功能基于name属性和表单上下文触发，可通过autocompl
学Java第五十三天——IO综合练习（1）
最新发布
weixin_67566799的博客
12-06 361
是用的糊涂包Hutool，其余的。完整的获取姓氏的代码。
实现左侧菜单栏的页面滚动定位功能
在CSS中，为了使菜单栏固定在页面左侧并且在页面滚动时也保持可见，需要对`#sidebar`进行相应的样式设置。主要的CSS属性包括： - `position: fixed;`：将元素相对于浏览器窗口定位，使之固定在指定位置。 - `top: 0...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值