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

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

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

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

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

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

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

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

css实现立体块状菜单悬浮模糊效果代码

css+js实现图标菜单点击排列动画效果代码

svg+css实现自适应黑白主题切换的顶部菜单效果代码
