婺源旅游网 - 最美乡村 - 婺源民间故事

标题: JS简易实现导航栏滑到顶部固定 [打印本页]

---

作者: 田野    时间: 2021-3-13 16:53
标题: JS简易实现导航栏滑到顶部固定
适用场景如下图所示：
(, 下载次数: 364)

上传

点击文件名下载附件

适用于导航栏顶部有滑动时需要隐藏的内容。

实现思路：利用position:fix 的css属性能够实现元素固定在屏幕的某一位置，配合 top:0px;可实现将导航栏固定在顶部。

故，可通过JS监听屏幕的滚动，当导航栏滚动到屏幕顶部时，修改导航栏的position属性。

简易DEMO代码如下：

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. 
    

复制代码

要注意的是，如果只修改导航栏的positon值，导航栏固定在顶端的同时，内容部分会向上跳一段距离，原因是当元素的position为fix时，会脱离原本的文档流，下面的元素会向上填充它原来占据的空间。

为了页面的平滑移动，避免出现内容被覆盖的情况，可以在修改导航栏position属性的同时，为下面的内容元素加上高度为导航栏高度的上边距。当然，方法也不唯一，可以根据情况采用不同方法，实现页面的平滑滑动。

不会发动图，大家想看效果的话可以将上面的代码复制到html文档中，浏览器查看即可。

---

欢迎光临 婺源旅游网 - 最美乡村 - 婺源民间故事 (https://www.wy166.com/)

Powered by Discuz! X3.5