js+css实现菜单滚动滚定在顶部效果代码-html代码-BFW代码库

js+css实现菜单滚动滚定在顶部效果代码

代码语言：html

代码描述：js+css实现菜单滚动滚定在顶部效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
  
  
  
<style>
/* helpers/grid.css */

.grid {
  margin-left: auto;
  margin-right: auto;
  max-width: 48em;
  width: 90%;
}

/* helpers/sticky.css */

.sticky {
  position: -webkit-sticky;
  position: sticky;
  will-change: transform;
}

.sticky--top {
  top: 0;
}

/* layout/base.css */

* {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 100%;
}

body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.75;
  margin: 0;
  min-height: 100%;
}

/* layout/header.css */

.header {
  background-color: #fff;
  padding-bottom: 1em;
  padding-top: 1em;
}


.header::after {
  bottom: 0;
  -webkit-box-shadow: 0 0.0625em 0.5em rgba(0, 0, 0, .3);
          box-shadow: 0 0.0625em 0.5em rgba(0, 0, 0, .3);
  content: '';
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  z-index: -1;
}

.header.is-active::after {
  opacity: 1;
}

/* layout/main.css */

.main {
  padding-top: 6em;
  padding-bottom: 6em;
}

/* modules/headline.css */

h1 {
  margin-bottom: 1.5em;
  margin-top: 0;
}

/* modules/navigation.css */

.navigation a {
  color: inherit;
  display: block;
  text-decoration: none;
}

.navigation .is-active {
  background-color: #000;
  color: #fff;
  padding-left: 1em;
  padding-right: 1em;
  border-radius: 999px;
}

.navigation__list {
  list-style: none;
  margin: -0.5em;
  padding: 0;
}

.navigation__list--inline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.navigation__item {
  margin: 0.5em;
}

/* modules/paragraph.css */

p {
  margin-bottom: 1.5em;
  margin-top: 1.5em;
}
</style>




</head>

<body>
  <header class="header sticky sticky--top js-header">

  <div class="grid">

    <nav class="navigation">
      <ul class="navigation__list navigation__list--inline">
        <li class="navigation__item"><a href="#" class="is-active">Home</a></li>
        <li class="navigation__item"><a href="#">About Us</a></li>
        <li class="navigation__item"><a href="#">Work</a></li>
        <li class="navigation__item"><a href="#">Clients</a></li>
        <li class="navigation__item"><a href="#">Contact</a></li>
      </ul>
    </nav>

  </div>

</header>

<main class="main">

  <div class="grid">

    <h1>Lorem ipsum dolor sit.</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id sed voluptatem error vel eius placeat harum voluptate doloribus ratione in, vero aliquid et, itaque, repellat magnam nisi adipisci unde, odit esse architecto hic! Eaque libero officia laudantium laboriosam non velit vero pariatur, rem nisi commodi dolores, culpa quibusdam dolorem nemo voluptatem. Ipsam, molestias autem iste est quia magni iusto distinctio esse magnam possimus tenetur dolor, suscipit fugiat ad? Natus officia magnam ipsam. Nisi aut quis natus voluptatum, sapiente inventore quidem similique odio, quod iste delectus commodi maxime asperiores doloribus officiis fuga, eaque, beatae ipsam assumenda architecto. At minima pariatur qui!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem numquam sint nisi .........完整代码请登录后点击上方下载按钮下载查看