效果演示
Kapture 2025-01-06 at 15.11.30.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>測試</title>
<style>
* {
box-sizing: border-box;
}
:root {
--dark-gray: #1a232d;
--darkest-gray: #0d1117;
--lavender: #e9ebfc;
--sm-spacer: 6vw;
--lg-spacer: 10vw;
--md-spacer: 8vw;
--xl-spacer: 12vw;
--xs-spacer: 4vw;
--xxs-spacer: 2vw;
--xxxs-spacer: 1vw;
--red: #f55454;
--light-red: #f99f9f;
--light-purple: #99a1ff;
--darkest-gray-50: #0d111780;
--green: #48bd54;
--purple: #7781fc;
--pink: #de697f;
--light-pink: #ff99ad;
--light-yellow: #ffd94d;
--light-green: #7cd084;
--light-blue: #4acae8;
--yellow: #c6a117;
--blue: #189ab8;
--dark-gray-50: #1a232d80;
}
body {
background-color: #e9ebfc;
font-family: neue-haas-grotesk-text, sans-serif;
}
#main-nav {
transition: transform 0.3s ease, background 0.3s ease,
border-color 0.3s ease, width 0.3s ease;
}
.main-nav {
z-index: 1;
grid-column-gap: 1vw;
grid-row-gap: 1vw;
background-color: #0000;
border: 1px solid #0000;
border-radius: 12px;
justify-content: space-between;
align-items: center;
margin-left: auto;
margin-right: auto;
padding: 12px 36px;
transition: opacity 0.2s, box-shadow 0.3s;
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.nav-group {
grid-column-gap: 1.5vw;
grid-row-gap: 1.5vw;
align-items: center;
display: flex;
}
.nav-group.main-nav-group {
grid-column-gap: 0vw;
grid-row-gap: 0vw;
}
.nav-link {
color: var(--lavender);
text-decoration: none;
transition: all 0.2s;
}
.nav-link:hover {
transform: scale(1.05);
}
.nav-link.main-nav-link {
border: 1px solid #0000;
border-radius: 0.5vw;
padding-left: 1.25vw;
padding-right: 1.25vw;
transition: all 0.2s;
}
.nav-link.main-nav-link:hover {
transform: scale(1.05);
}
.nav-link.main-nav-link.w--current {
border: 1px solid var(--dark-gray);
background-color: var(--darkest-gray-50);
}
.opacity-50 {
opacity: 0.5;
}
.opacity-30 {
opacity: 0.3;
}
.color-light-red {
color: var(--light-red);
}
.nav-logo {
width: 11.5vw;
}
.nav-logo.light {
display: none;
}
.main-nav-default {
transform: translateY(0px);
background: transparent;
border-color: transparent;
width: 100vw;
backdrop-filter: blur(0px);
box-shadow: rgba(0, 0, 0, 0) 0px 0px 4vw;
height: 71.5px;
transform-style: preserve-3d;
}
.main-nav-active {
transform: translate3d(0px, 24px, 0px) scale3d(1, 1, 1) rotateX(0deg)
rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
background: rgba(255, 255, 255, 0.5);
border-color: rgb(233, 235, 252);
width: 92vw;
backdrop-filter: blur(12px);
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 4vw;
height: 71.5px;
transform-style: preserve-3d;
}
h1 {
margin: 0;
padding-top: 80px;
height: 120vh;
}
</style>
</head>
<body>
<div
id="main-nav"
data-w-id="55a1e26b-7315-064e-41b7-3281ebdfc5b2"
class="main-nav"
>
<a
href="/"
aria-current="page"
class="display-none-mobile-landscape-and-below w-inline-block w--current"
><img
src="https://cdn.prod.website-files.com/66d2b621cb0b824deff321d0/66d75b261592edff29a6e9f0_logo-light.svg"
loading="lazy"
alt=""
class="nav-logo"
data-categories="unclassified"
style="display: none" /><img
src="https://cdn.prod.website-files.com/66d2b621cb0b824deff321d0/66db8c232f417a6f617d90b1_logo-dark.svg"
loading="lazy"
alt=""
class="nav-logo light"
data-categories="unclassified"
style="display: block" /></a
><a
data-w-id="bcbb3569-c145-d561-9931-fd7604c68aa6"
href="#"
class="btn tertiary in-nav main-nav-link close-btn w-inline-block"
><div>Close</div>
<img
src="https://cdn.prod.website-files.com/66d2b621cb0b824deff321d0/66daa9dfb145ddd21dbbb0e2_close-light.svg"
loading="lazy"
alt=""
class="btn-icon"
data-categories="unclassified"
/></a>
<div
class="horizontal-divider stretch-divider opacity-30 reverse no-gradient display-none-mobile-landscape-and-below"
></div>
<div class="nav-group main-nav-group">
<a href="/about" class="nav-link main-nav-link">About</a
><a href="/blog" class="nav-link main-nav-link">Blog</a
><a href="/pricing" class="nav-link main-nav-link">Pricing</a
><a
class="nav-link main-nav-link"
>Jobs</a
>
</div>
<div
class="horizontal-divider stretch-divider opacity-30 no-gradient display-none-mobile-landscape-and-below"
></div>
<div class="nav-group main-nav-group">
<a
target="_blank"
class="btn tertiary in-nav main-nav-link w-inline-block"
><div>Documentation</div>
<img
src="https://cdn.prod.website-files.com/66d2b621cb0b824deff321d0/66d3637a43303c850a7cbe7e_file-light.svg"
loading="lazy"
alt=""
class="btn-icon"
data-categories="unclassified" /></a
><a
target="_blank"
class="btn tertiary in-nav main-nav-link w-inline-block"
><div>GitHub</div>
<img
src="https://cdn.prod.website-files.com/66d2b621cb0b824deff321d0/66d802cf28f0f15fe78b9901_github-light.svg"
loading="lazy"
alt=""
class="btn-icon wide"
data-categories="unclassified"
/></a>
</div>
<div
class="horizontal-divider stretch-divider opacity-30 no-gradient display-none-mobile-landscape-and-below"
></div>
<div class="nav-group main-nav-group">
<a
href="/contact"
class="btn tertiary color-light-red main-nav-link w-inline-block"
><div>Contact us</div>
<img
src="https://cdn.prod.website-files.com/66d2b621cb0b824deff321d0/66da7e1105e97230c9c350dc_send-light-red.svg"
loading="lazy"
alt=""
class="btn-icon extra-wide"
data-categories="unclassified"
/></a>
</div>
</div>
<h1>
占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符占位符
</h1>
<script>
const mainNav = document.getElementById('main-nav')
const mainNavDefault = 'main-nav-default'
const mainNavActive = 'main-nav-active'
// 監(jiān)聽滾動(dòng)事件
window.addEventListener('scroll', () => {
if (window.scrollY > 80) {
mainNav.classList.add(mainNavActive)
mainNav.classList.remove(mainNavDefault)
} else {
mainNav.classList.add(mainNavDefault)
mainNav.classList.remove(mainNavActive)
}
})
</script>
</body>
</html>
