Shulou(Shulou.com)06/03 Report--

This article mainly introduces JS how to achieve web navigation bar special effects, the article introduces in great detail, has a certain reference value, interested friends must read it!

The following is the code implementation, you are welcome to copy and paste and collection.

Native JS implements web navigation bar special effects * {margin: 0; padding: 0; box-sizing: border-box; word-wrap: break-word; font-family: 'Microsoft Yahei', 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: 015px; 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 } Logo home page about service works contact window.addEventListener ('scroll', () = > {let header = document.querySelector (' header') / / important attribute header.classList.toggle ('sticky') Window.scrollY > 0)})

The following is the picture bg.jpg referenced in the code

The above is all the contents of the article "how to achieve the special effects of the web navigation bar in JS". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.