纯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

svg+js实现鼠标悬浮跟随文字导航条效果代码

css+div实现悬浮文字旋转的导航菜单效果代码

div+css实现图标导航菜单栏悬浮效果代码

css实现简洁导航条点击滑动效果代码

css实现带右侧弹出框的顶部菜单栏效果代码

svg+js实现可折叠左侧垂直菜单导航条效果代码

svg+css实现炫酷图标导航条点击动画效果代码

div+css布局实现顶部导航条消息通知点击下拉显示消息列表效果代码

jquery+css实现粘性导航菜单页面代码

css+svg实现图标导航栏选中切换动画效果代码