css实现网页滚动粘性导航条效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现网页滚动粘性导航条效果代码

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

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

<head>
  <meta charset="UTF-8">
  <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
  
<style>
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

:root {
  --header-bg: hsl(196, 10%, 20%);
  --header-bg-sticky: hsl(196, 10%, 30%, .98);
  --header-text: hsl(0, 5%, 96%);
  --header-height: 48px;
  --header-width-sticky: min(600px, 100%) ;
  --nav-gap: 1px;
  --nav-item-space: 8px;
  --content-space: 64px 32px;
  --btn-space: 16px 32px;
  --btn-radius: 99em;
  --hero-gap: 16px;
  --footer-bg: hsl(196, 10%, 20%);
  --footer-text: hsl(0, 5%, 96%);
  --footer-height: 48px;
}

html {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
}

header {
  background-color: hsl(196, 10%, 20%);
  background-color: var(--header-bg);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  overflow: visible;
  margin: 0 auto;
  height: 48px;
  height: var(--header-height)
}

header ul {
    display: grid;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    justify-items: center;
    place-items: center;
    height: 100%;
    list-style: none;
    grid-auto-flow: column;
    grid-gap: 1px;
    gap: 1px;
    grid-gap: var(--nav-gap);
    gap: var(--nav-gap);
    margin: 0 auto;
    padding: 0;
    width: min(900px, 100%);
  }

header li {
    margin: 0;
    padding: 8px;
    padding: var(--nav-item-space);
  }

header a:link,header a:visited {
    display: block;
    text-align: center;
    text-decoration: none;
    color: hsl(0, 5%, 96%);
    color: var(--header-text);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
  }

header a:-webkit-any-link {
    display: block;
    text-align: center;
    text-decoration: none;
    color: hsl(0, 5%, 96%);
    color: var(--header-text);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
  }

header a:-moz-any-link {
    display: block;
    text-align: center;
    text-decoration: none;
    color: hsl(0, 5%, 96%);
    color: var(--header-text);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
  }

header a:any-link {
    display: block;
    text-align: center;
    text-decoration: none;
    color: hsl(0, 5%, 96%);
    color: var(--header-text);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
  }

.hero {
  display: grid;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  justify-items: center;
  place-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  place-content: center;
  grid-gap: 16px;
  gap: 16px;
  grid-gap: var(--hero-gap);
  gap: var(--hero-gap);
  aspect-ratio: 16 / 9;
  background-color: hsl(196, 10%, 20%);
  background-color: var(--header-bg);
  color: hsl(0, 5%, 96%);
  color: var(--header-text)
}

.hero h1 {
    font-size: 64px;
    font-weight: 100;
    line-height: 1;
    margin: 0;
  }

.hero p {
    font-size: 32px;
    font-weight: 200;
    line-height: 2;
    margin: 0;
  }

.hero button {
    background: transparent;
    color: currentColor;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    border: 1px solid currentColor;
    border-radius: 99em;
    border-radius: var(--btn-radius);
    padding: 16px 32px;
    padding: var(--btn-space);
    text-transform: uppercase;
  }

.content {
  width: min(1000px, 100%);
  padding: 64px 32px;
  padding: var(--content-space);
  margin: auto;

  h1 {
    font-weight: 200;
  }
  h2 {
    font-weight: 300;
  }
  p {
    font-size: 18px;
    line-height: 1.618;
  }
}

footer {
  background-color: hsl(196, 10%, 20%);
  background-color: var(--footer-bg);
  color: hsl(0, 5%, 96%);
  color: var(--footer-text);
  height: 48px;
  height: var(--footer-height);
  display: grid;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  justify-items: center;
  place-items: center;
}

@supports (animation-timeline: scroll()) {
  header {
    -webkit-animation: header ease-in-out both;
            animation: header ease-in-out both;
    animation-timeline: scroll();
    animation-range: 0 90vh;
  }

  @-webkit-keyframe.........完整代码请登录后点击上方下载按钮下载查看