jquery实现浮动滚动菜单导航效果-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/reset.min.css">
<style>
:root {
  --space: 1rem;
  --border: 4px;
  --page-width: 80ch;
  --font-family: 'Airbnb Cereal', sans-serif;
  --color-link: black;
  --color-active: #00848A;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --duration: 350ms;
  --section-offset: 0;
}

* {
  box-sizing: border-box;
}

html {
  --scroll-behavior: smooth;
  scroll-behavior: var(--scroll-behavior);
}
@media (prefers-reduced-motion: reduce) {
  html {
    --scroll-behavior: auto;
  }
}

body {
  font-family: var(--font-family);
  line-height: 1.5;
}

h1, h2, h3 {
  font-weight: bold;
  line-height: 1.25;
}

h1 {
  font-size: 2.75rem;
}

h2 {
  font-size: 2.25rem;
}

h3 {
  font-size: 1.5rem;
}

ul:not(.menu) {
  list-style-type: disc;
  margin-left: var(--space);
}
ul:not(.menu) > li + li {
  margin-top: var(--space);
}

.nav-sections {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
  background-color: white;
  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.12);
  z-index: 100;
}
.nav-sections .menu {
  position: relative;
  display: -webkit-box;
  display: flex;
  flex-wrap: nowrap;
  overflow: scroll;
  -ms-scroll-chaining: none;
      overscroll-behavior: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 0 auto;
  max-width: var(--page-width);
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-transition: -webkit-transform var(--ease) var(--duration);
  transition: -webkit-transform var(--ease) var(--duration);
  transition: transform var(--ease) var(--duration);
  transition: transform var(--ease) var(--duration), -webkit-transform var(--ease) var(--duration);
}
.nav-sections .menu::-webkit-scrollbar {
  display: none;
}
.nav-sections .menu-item-link {
  display: block;
  padding: 12px 16px;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-link);
  -webkit-transition: color var(--ease) var(--duration);
  transition: color var(--ease) var(--duration);
}
.nav-sections .menu-item-link.active {
  color: var(--color-active);
}

.menu-item:first-of-type .menu-item-link {
  margin-left: 0;
}

.active-line {
  position: absolute;
  bottom: 10%;
  left: 0;
  height: 80%;
  border-radius: 4px;
  background-color: var(--color-active);
  opacity: 10%;
  -webkit-transition: width var(--ease) var(--duration), -webkit-transform var(--ease) var(--duration);
  transition: width var(--ease) var(--duration), -webkit-transform var(--ease) var(--duration);
  transition: width var(--ease) var(--duration), transform var(--ease) var(--duration);
  transition: width var(--ease) var(--duration), transform var(--ease) var(--duration), -webkit-transform var(--ease) var(--duration);
}

.placeholder-section {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  text-align: center;
  height: 50vh;
  background-color: lightgray;
}

.page-sections {
  margin: 0 auto;
  max-width: var(--page-width);
}

.page-section {
  margin: calc(var(--space) * 2) 0;
}
.page-section > * + * {
  margin-top: calc(var(--space) * 1.5);
}

.section-title {
  outline: none;
}
.section-title:before {
  content: "";
  display: block;
  visibility: hidden;
  pointer-events: none;
  margin-top: calc(var(--section-offset) * -1px);
  height: calc(var(--section-offset) * 1px);
}

.buttons {
  padding: var(--space) 0 calc(var(--space) * 2) 0;
}

.btn {
  font: var(--font-family);
  font-size: 12px;
  margin-right: 4px;
  background: transparent;
  border: 1px solid black;
  border-radius: 100px;
  padding: 8px 12px;
}
.btn:focus {
  outline: 0;
}
.btn:active {
  background: #efefef;
}
.btn.on {
  background: black;
  color: white;
}

.micro .menu-item-link {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}
.micro .menu-item:first-of-type .menu-item-link {
  margin-left: 0;
}

.floating nav {
  margin: 12px auto;
  max-width: 81ch;
  border-radius: 4px;
  top: 12px;
}

.bordered .nav-sections {
  box-shadow: none;
  border: 1px solid #EBEBEB;
}

.shadows .nav-sections {
  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.12);
}

.rounded .active-line {
  border-radius: 100px;
}
.rounded nav {
  border-radius: 100px;
}

.highlight-bar.floating .nav-sections {
  max-width: 88ch;
}
.highlight-bar .menu-item-link {
  padding: 12px 0;
  margin: 0 12px;
}
.highlight-bar .active-line {
  bottom: 0;
  height: 2px;
  opacity: 1;
  border-radius: 4px;
}
</style>


</head>
<body translate="no">
<div id="version" class="version">
<nav class="nav-sections">
<ul class="menu">
<li class="menu-item"><a class="menu-item-link active" href="#about">About</a></li>
<li class="menu-item"><a class="menu-item-link" href="#documentation">Documentation</a></li>
<li class="menu-item"><a class="menu-item-link" href="#showcase">Showcase</a></li>
<li class="menu-item"><a class="menu-item-link" href="#latest-news">Latest News</a></li>
<li class="menu-item"><a class="menu-item-link" href="#contact-us">Contact Us</a></li>
<div class="active-line"></div>
</ul>
</nav>
<main id="main-content" class="page-sections">
<section class="page-section">
<div class="buttons">
<button class="btn standard on">Clear all</button>
<button class="btn micro">Micro</button>
<button class="btn floating">Floating</button>
<button class="btn bordered">Bordered</button>
<button class="btn shadows">Shadows</button>
<button class="btn rounded">Rounded</button>
<button class="btn highlight-bar">Highlight bar</button>
</div>
<h2 class="section-title" id="about">About</h2>
<p>As you scroll through each section, the horizontal navigation will update its active state to the correlating anchor link. The menu overflows horizontally and allows the user to scroll left and right. If an anchor link is outside of the viewport, the menu will automatically scroll the active item into view.</p>
<p>And now... placeholder text: Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur corporis, placeat eaque iure ex possimus ab exercitationem atque sed culpa eos vel, ipsa porro corrupti omnis tempore, fuga quos explicabo.</p>
<p>Velit eos maxime veritatis sunt provident accusantium vitae, aperiam consectetur, laboriosam consequatur beatae quam recusandae, corporis iste laudantium illo praesentium amet ratione aliquid modi. Officia similique incidunt magni doloremque aperiam!</p>
<p>Cupiditate odio exercitationem dolorem explicabo numquam natus, cum a omnis incidunt ipsam quibusdam eligendi odit consectetur? Laboriosam magni labore, nobis, facilis aliquid delectus ad molestiae quo iusto a, consectetur molestias?</p>
<p>Minus ratione quae, quibusdam ab atque obcaecati. Necessitatibus perferendis quibusdam, placeat ipsa expedita recusandae culpa labore? Aut quaerat animi culpa minima illo, odio tempore corporis, quidem nisi eius iure fugit! Id, earum reprehenderit. Placeat voluptate aut, provident aspernatur consequuntur praesentium ullam, magni deserunt repellendus dicta eos odio modi aliquid quasi tempora saepe adipisci itaque? Unde distinctio aut perferendis delectus quam?</p>
<h3>Lorem ipsum dolor</h3>
<ul>
<li>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis, quasi temporibus laborum quidem praesentium et vero incidunt itaque. Hic, aliquid odio non atque exercitationem ipsa? A repudiandae dolores blanditiis voluptatem.</li>
<li>Dolore dolorem velit impedit libero non. Deserunt optio rerum earum quas recusandae. Praesentium, voluptates ipsa temporibus. Nisi, qui autem. Aliquid?</li>
<li>Ea facilis corporis enim tempora tenetur consectetur quam asperiores, porro reprehenderit expedita! Esse laboriosam suscipit illo. Quasi numquam tempora aperiam corrupti alias? Amet provident esse tenetur eveniet voluptatum modi iure.</li>
<li>Provident labore iusto, voluptatibus incidunt cumque cum quisquam, asperiores accusamus velit repellat mollitia facilis. Sit, voluptas tempore. Placeat quas, corporis enim ratione accusamus repellendus quos repellat quo voluptatum, eos rerum.</li>
</ul>
</section>
<section class.........完整代码请登录后点击上方下载按钮下载查看
jquery实现浮动滚动菜单导航效果

网友评论0

div+css实现漂亮的垂直侧边栏可伸缩菜单效果代码

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

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

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

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

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

div+css实现下拉菜单代码

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

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

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