当WEB页面过长时,需要拖动滚动条进行浏碎茯钍婵览,这时导航条也会随着页面的拖动而消失,如果能让导航条在到达页面顶端时就将其固定下来,那我们再使用导航时就会非常方便了,具体效果如下动图。霍丶魇汜下面我们来一起实现一下
工具/原料
Sublime编辑器
HTML+CSS
JavaScript
方法/步骤
1、我们先编写页面所需要的HTML结构,代码如下:
2、接下来,我们定义CSS的全局样式和banner的基本样式,代码如下:
3、接着定义主体内容的CSS样式,代码如下:
4、定义footer的CSS样式,代码如下:
5、接下来是关键,也就是使用JavaScript实现我们需要的效果,具体代码如下:
6、现螅岔出礤在打开浏览器则试一下,默认情况下是正常显示的,当拖动滑过下移且导航到达顶端时就会被固定下来。这种效果非常常见,希望对大家有所帮助。