纯css实现导航条滚动后固定和锚点导航-html代码-BFW代码库

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/normalize.css">
<style>
html, body {
  height: 100%;
  max-height: 100%;
  overflow: auto;
  scroll-behavior: smooth;
}

*, input {
  box-sizing: border-box;
}

.site-wrapper {
  padding-top: 30px;
}
.site-wrapper:before {
  content: '';
  display: block;
  height: 10px;
  width: 100%;
  position: absolute;
  z-index: 999;
  top: 50px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
}

[class*="button"] {
  display: block;
  padding: 10px 20px;
  box-shadow: inset 0 0 0 1px #005d80;
  margin-left: 5px;
  border-radius: 5px;
  text-decoration: none;
  color: #005d80;
}
[class*="button"]:hover {
  color: #00baff;
  box-shadow: inset 0 0 0 1px #00baff;
}
[class*="button"][class*="-prominent"] {
  background-color: #005d80;
  color: white;
  box-shadow: none;
  border: none;
}
[class*="button"][class*="-prominent"]:hover {
  background-color: #00baff;
}

.login-form {
  position: absolute;
  top: 0;
  background: white;
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-100px);
  opacity: 0;
  transition: .25s ease-in-out;
}
.login-form input {
  padding: 0 10px;
  height: 38px;
  border: 1px solid #cccccc;
  margin-left: 5px;
  border-radius: 5px;
}

#show-login {
  position: fixed;
  transform: translateX(-4000px);
}
#show-login:checked + nav {
  opacity: 0;
}
#show-login:checked ~ .login-form {
  transform: translateY(0);
  opacity: 1;
}

header {
  position: sticky;
  z-index: 1000;
  top: 0;
  background: white;
}
header nav {
  height: 50px;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  max-width: calc(1200px + 40px);
  transition: .25s ease-in-out;
}
header nav ul {
  list-style-type: none;
  display: flex;
  padding: 0 0 0 20px;
  margin: 0;
  margin-right: auto;
}
header nav ul li {
  margin-right: 20px;
}
header nav ul li a {
  text-decoration: none;
  color: #00baff;
}
header nav ul li a:hover {
  text-decoration: underline;
}
header .logo {
  display: block;
  height: 30px;
  width: 30px;
  overflow: hidden;
}
header .logo .logo-mark {
  display: block;
  height: 30px;
  width: 60px;
  border: 3px solid #005d80;
  border-radius: 30px;
  transform: translateX(-30px);
  transition: .25s ease-in-out;
}
header .logo:hover .logo-mark {
  border-color: #00baff;
  transform: translateX(0);
}

.cta {
  text-align: center;
  padding: 100px 0;
  margin-bottom: -20px;
  overflow: hidden;
  position: relative;
}
.cta .cta-background {
  position: absolute;
  z-index: 0;
  top: 0;
  min-height: 100%;
  width: 100%;
  left: 0;
}
.cta h1 {
  position: relative;
  z-index: 1;
  color: white;
  text-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
}

main {
  padding: 0 70px;
}
main h2 {
  color: #005d80;
  margin: 0;
  padding-top: 70px;
}
main h2, main p {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

footer {
  margin-top: 70px;
  padding: 40px;
  background: rgba(0, 93, 128, 0.1);
}
footer .footer-elements {
  max-width: 1200px;
  margin: 0 auto;
}
</style>

</head>
<body translate="no">
<div class="site-wrapper" id="home">
<header>
<input type="checkbox" id="show-login" />
<nav class="site-nav">
<a href="#home" class="logo">
<span class="logo-mark"></span>
</a>
<ul>
<li><a href="#products">Products</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
<label class="button" for="show-login">Log In</label>
<a href="#0" class="button-prominent">Sign Up</a>
</nav>
<form class="login-form">
<input type="text" placeholder="username" />
<input type="password" placeholder="password" />
<label class="button" for="show-login">Cancel</label>
<button class="button-prominent">Go</button>
</form>
</header>
<section class="cta">
<h1>I'm your main call to action.<br>I'm important, y'all.</h1>
<img class="cta-background" src="http://repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png" />
</section>
<main>
<h2 id="products">Products</h2>
<p>You really think you can fly that thing? We gotta burn the rain forest, dump toxic waste, pollute the air, and rip up the OZONE! 'Cause maybe if we screw up this planet enough, they won't want it anymore! This thing comes fully loaded. AM/FM radio, reclining bucket seats, and... power windows.</p><p>So you two dig up, dig up dinosaurs? What do they got in there? King Kong? You really think you can fly that thing? Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? You really think you can fly that thing? Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists.</p><p>God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. Hey, you know how I'm, like, always trying to save the planet? Here's my chance. So you two dig up, dig up dinosaurs? God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs.</p><p>I gave it a cold? I gave it a virus. A computer virus. Do you have any idea how long it takes those cups to decompose. Just my luck, no ice. I was part of something special. Must go faster... go, go, go, go, go! I was part of something special. This thing comes fully loaded. AM/FM radio, reclining bucket seats, and... power windows.</p><p>Hey, you know how I'm, like, always trying to save the planet? Here's my chance. Jaguar shark! So tell me - does it really exist? You.........完整代码请登录后点击上方下载按钮下载查看

纯css实现导航条滚动后固定和锚点导航

网友评论0

div+css实现底部横线菜单切换窗口效果代码

div+css实现横向鼠标悬停翻转文字导航菜单效果代码

react+use-web-animations实现横向和竖向图标菜单滑动效果代码

js+css实现滑动图标导航菜单效果代码

matter实现自由落体重力下落的导航菜单效果代码

div+css实现下拉菜单代码

div+css实现左侧悬浮伸缩菜单代码

div+Css实现手风琴二级菜单折叠效果代码

div+css实现二级下拉菜单导航效果代码

css+div实现左侧垂直伸缩菜单导航条代码