平移移动端导航动画效果(可复制源码)

yycvip

效果

完整代码

HTML+JS

1. <nav class="nav-bar">
   
2.         <ul>
   
3.             <li class="active"><i class="fas fa-home"></i>首页</li>
   
4.             <li><i class="fas fa-info-circle"></i>关于</li>
   
5.             <li><i class="fas fa-cogs"></i>服务</li>
   
6.             <li><i class="fas fa-envelope"></i>联系</li>
   
7.             <div class="slider"></div>
   
8.         </ul>
   
9.     </nav>
   
10.     <div class="content">
    
11.         <!-- 页面内容 -->
    
12.     </div>
    
13.     <script >
    
14.         let lastScrollTop = 0;
    
15. 
    
16. window.addEventListener('scroll', function() {
    
17.     let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    
18.     if (scrollTop > lastScrollTop) {
    
19.         document.querySelector('.nav-bar').style.opacity = '0';
    
20.     } else {
    
21.         document.querySelector('.nav-bar').style.opacity = '1';
    
22.     }
    
23.     lastScrollTop = scrollTop;
    
24. });
    
25. 
    
26. // 添加导航项点击事件和滑动效果
    
27. const slider = document.querySelector('.nav-bar .slider');
    
28. const navItems = document.querySelectorAll('.nav-bar li');
    
29. 
    
30. function moveSlider(item) {
    
31.     slider.style.width = `${item.offsetWidth}px`;
    
32.     slider.style.left = `${item.offsetLeft}px`;
    
33. }
    
34. 
    
35. navItems.forEach(item => {
    
36.     item.addEventListener('click', function() {
    
37.         document.querySelector('.nav-bar li.active').classList.remove('active');
    
38.         this.classList.add('active');
    
39.         moveSlider(this);
    
40.     });
    
41. });
    
42. 
    
43. // 初始化滑块位置
    
44. moveSlider(document.querySelector('.nav-bar li.active'));
    
45.     </script>

复制代码

CSS

1. <style>
   
2. body {
   
3.     margin: 0;
   
4.     padding: 0;
   
5.     font-family: Arial, sans-serif;
   
6. }
   
7. 
   
8. .nav-bar {
   
9.     position: fixed;
   
10.     top: 20px;
    
11.     width: 100%;
    
12.     background-color: rgba(51, 51, 51, 0.8);
    
13.     transition: opacity 0.3s ease;
    
14. }
    
15. 
    
16. .nav-bar ul {
    
17.     list-style-type: none;
    
18.     padding: 0;
    
19.     margin: 0;
    
20.     display: flex;
    
21.     justify-content: space-around;
    
22.     position: relative;
    
23. }
    
24. 
    
25. .nav-bar li {
    
26.     padding: 15px;
    
27.     color: white;
    
28.     cursor: pointer;
    
29.     position: relative;
    
30.     transition: all 0.3s ease;
    
31.     z-index: 1;
    
32. }
    
33. 
    
34. .nav-bar li::after {
    
35.     content: '';
    
36.     position: absolute;
    
37.     bottom: 0;
    
38.     left: 0;
    
39.     width: 0;
    
40.     height: 2px;
    
41.     background-color: #fff;
    
42.     transition: width 0.3s ease;
    
43. }
    
44. 
    
45. .nav-bar li:hover::after,
    
46. .nav-bar li.active::after {
    
47.     width: 100%;
    
48. }
    
49. 
    
50. .nav-bar li.active {
    
51.     background-color: rgba(255, 255, 255, 0.2);
    
52. }
    
53. 
    
54. .nav-bar .slider {
    
55.     position: absolute;
    
56.     bottom: 0;
    
57.     left: 0;
    
58.     height: 100%;
    
59.     background-color: rgba(255, 255, 255, 0.2);
    
60.     transition: all 0.3s ease;
    
61. }
    
62. 
    
63. .nav-bar li i {
    
64.     margin-right: 5px;
    
65. }
    
66. 
    
67. .content {
    
68.     height: 2000px; /* 用于模拟长页面 */
    
69. }
    
70.     </style>

复制代码