JS實現網頁導航條特效
本文實例給大傢分享瞭一個用原生JS實現的比較實用的網頁導航條特效,當頁面滾動時,導航條會發生變化,效果如下:
以下是代碼實現,歡迎大傢復制粘貼和收藏。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原生JS實現網頁導航條特效</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; word-wrap: break-word; font-family: '微軟雅黑', sans-serif; } body { background: #000; min-height: 200vh; } header { position: fixed; top: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; transition: 0.6s; padding: 40px 100px; z-index: 2; } header.sticky { padding: 5px 100px; background: #fff; } header .logo { position: relative; font-weight: 700; color: #fff; text-decoration: none; font-size: 2em; text-transform: uppercase; letter-spacing: 2px; transition: 0; } header ul { position: relative; display: flex; justify-content: center; align-items: center; } header ul li { position: relative; list-style: none; } header ul li a { position: relative; margin: 0 15px; text-decoration: none; color: #fff; letter-spacing: 2px; font-weight: 500px; transition: 0.5s; } .banner { position: relative; width: 100%; height: 100vh; background: url(bg.jpg); background-size: cover; } header.sticky .logo, header.sticky ul li a { color: #000; } </style> </head> <body> <header> <a href="#" class="logo">Logo</a> <ul> <li><a href="#" >首頁</a></li> <li><a href="#" >關於</a></li> <li><a href="#" >服務</a></li> <li><a href="#" >作品</a></li> <li><a href="#" >聯系</a></li> </ul> </header> <section class="banner"></section> <script> window.addEventListener('scroll', () => { let header = document.querySelector('header') // 重要屬性 header.classList.toggle('sticky', window.scrollY > 0) }) </script> </body> </html>
以下是代碼中所引用的圖片 bg.jpg
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- Vue3導航欄組件封裝實現方法
- 詳解CSS開發過程中的20個快速提升技巧
- 使用JavaScript和CSS實現簡單的字符計數器
- 利用JavaScript創建一個兔年春節倒數計時器
- jquery+swiper組件實現時間軸滑動年份tab切換效果