悬浮导航栏

开发工具与关键技术： DW

撰写时间：2021/6/7

注意看红色箭头，按顺序操作下去

 

                                            图1-1

1、 先在顶部写个滚动条

 

                                                        图1-2

2、 绑定滚动条滚动事件

 

                                                        图1-3

3、 获取滚动条位置

4、 获取元素

 

                                    图1-4

5、 判断滚动条是否向下滚动，滚动条向上移动

 

                                                      图1-5

6、 记录滚动条位置  

7、 判断滚动条是否向上滚动

 

                                                             图1-6

8、给滚动条位置赋值

 

                                              图1-7

9、 给滚动条加个延迟

10、 有一个漏洞就是刷新页面过后滚动条不弹下来，因为我暂时用不到所以不改了，大家可自行改回来啊！

这是我所学到的悬浮导航栏，所以我要分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！