2021-06-08

                                                                            下拉出现导航

1. 首先我们创建一个新的HTML，然后在 script的标签里引入一个名为jquery-3.3.1.min.js的插件。

 

 

2、接着就在body标签里创建一个叫box的div，并设置他的id为box，然后设置body的高度为1500px。

 

3、之后我们就设置box的样式，先设置宽度，高度和背景颜色，再给box设置animation属性（@keyframes 规定动画。animation-name 规定 @keyframes 动画的名称），然后再通过none值来隐藏元素。

 

 

4、接着我们就通过 @keyframes 来设置0% 或者 100% 所需要的效果。

 

 

 

5、然后就通过js来设置元素滚动的距离来隐藏或显示图片（scrollTop：可以直接获取当前滚轮的偏移量；scrollTop加参数可以设置滚轮的偏移量；$(window).scrollTop();获取当前页面的滚轮的偏移量。

 

 

 

6，最后我们就通过if 语句来判断sc偏移是否超过300（show 可以显示隐藏的元素；hide 可以隐藏显示的元素）

 

 

 

 

 

 

 

 

 

 

 

7、代码完成后我们去网站看一下效果，刚进去的时候网页上什么也没有，当我们把鼠标往下拉的时候，顶部就会出现一个框，当我们往上拉时，框就会消失。

 

 

 

 

 

 

 

 

 

以上就是我的分享！请多多指教！