JS實(shí)現(xiàn)網(wǎng)頁(yè)導(dǎo)航條特效
本文實(shí)例給大家分享了一個(gè)用原生JS實(shí)現(xiàn)的比較實(shí)用的網(wǎng)頁(yè)導(dǎo)航條特效,當(dāng)頁(yè)面滾動(dòng)時(shí),導(dǎo)航條會(huì)發(fā)生變化,效果如下:
以下是代碼實(shí)現(xiàn),歡迎大家復(fù)制粘貼和收藏。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原生JS實(shí)現(xiàn)網(wǎng)頁(yè)導(dǎo)航條特效</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="#" >首頁(yè)</a></li> <li><a href="#" >關(guān)于</a></li> <li><a href="#" >服務(wù)</a></li> <li><a href="#" >作品</a></li> <li><a href="#" >聯(lián)系</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
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JS實(shí)現(xiàn)選中當(dāng)前菜單后高亮顯示的導(dǎo)航條效果
- CSS3+Js實(shí)現(xiàn)響應(yīng)式導(dǎo)航條
- 仿客齊集首頁(yè)導(dǎo)航條DIV+CSS+JS [代碼實(shí)例]
- 基于JS代碼實(shí)現(xiàn)導(dǎo)航條彈出式懸浮菜單
- vuejs 切換導(dǎo)航條高亮(路由菜單高亮)的方法示例
- JS+CSS實(shí)現(xiàn)鼠標(biāo)滑過(guò)時(shí)動(dòng)態(tài)翻滾的導(dǎo)航條效果
- JS組件Bootstrap導(dǎo)航條使用方法詳解
- javascript實(shí)現(xiàn)的鼠標(biāo)懸停時(shí)動(dòng)態(tài)翻滾的導(dǎo)航條
- js實(shí)現(xiàn)橫向拖拽導(dǎo)航條功能
- 純JS實(shí)現(xiàn)彈性導(dǎo)航條效果
相關(guān)文章
js將當(dāng)前時(shí)間格式轉(zhuǎn)換成時(shí)間搓(自寫(xiě))
將時(shí)間轉(zhuǎn)換成時(shí)間搓的方法有很多,在本文為大家介紹下使用js將當(dāng)前時(shí)間轉(zhuǎn)換成時(shí)間搓 例如2013-09-11 12:12:12,感興趣的朋友可以參考下2013-09-09JS獲取節(jié)點(diǎn)的兄弟,父級(jí),子級(jí)元素的方法
本篇文章主要是對(duì)JS獲取節(jié)點(diǎn)的兄弟,父級(jí),子級(jí)元素的方法進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01用JavaScript實(shí)現(xiàn)PHP的urlencode與urldecode函數(shù)
這篇文章主要介紹了用JavaScript實(shí)現(xiàn)PHP的urlencode與urldecode函數(shù),很多情況下我們用了出來(lái)php urlencode出來(lái)的網(wǎng)址,需要的朋友可以參考下2015-08-08原生js實(shí)現(xiàn)對(duì)Ajax的封裝(仿jquery)
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)對(duì)Ajax的封裝,模仿jquery,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01微信小程序onLaunch異步,首頁(yè)onLoad先執(zhí)行?
這篇文章主要介紹了微信小程序onLaunch異步,首頁(yè)onLoad先執(zhí)行? 文章底部給大家介紹了小程序_onLaunch異步回調(diào)數(shù)據(jù)加載問(wèn)題的兩種解決方案,需要的朋友可以參考下2018-09-09Smartour 讓網(wǎng)頁(yè)導(dǎo)覽變得更簡(jiǎn)單(推薦)
這篇文章主要介紹了Smartour 讓網(wǎng)頁(yè)導(dǎo)覽變得更簡(jiǎn)單(推薦),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07JS中數(shù)學(xué)計(jì)算精度問(wèn)題的解決方案
這篇文章主要給大家介紹了JS中數(shù)學(xué)計(jì)算精度問(wèn)題的解決方案,文中通過(guò)代碼示例和圖文結(jié)合給大家講解非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-12-12