css+div布局实现粘性头部文章导航菜单效果代码-html代码-BFW代码库

css+div布局实现粘性头部文章导航菜单效果代码

代码语言：html

代码描述：css+div布局实现粘性头部文章导航菜单效果代码

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

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

<head>
  <meta charset="UTF-8">
  
  
  
<style>
@import url(https://fonts.bunny.net/css?family=jura:300,500);
@layer base, demo;

@layer demo {
  :root{
    --nav-bg-color: rgb(2 74 112);
    --nav-bg-color-scroll: rgb(2 74 112 / .75);
    --nav-target-color: deeppink;
    --nav-link-border-color-hover: white;
    --nav-link-color: white;
    --nav-y-scroll: 20px; /* distance from top when scrolling */
    --nav-blur-scroll: 3px; /* background blur when scrolling */
  }
  html {
    container-type: scroll-state;
    container-name: scroller;
    scroll-behavior: smooth;   
  }
  
  p {
    line-height: 1.5;
  }
  nav,section,h1{
    width: min(100% - 4rem,800px);
    margin: 0 auto;
  }
	h1{
		margin-block-start: 2rem;
		font-size: 1.4rem;
		text-wrap: balance;
	}
  nav{
    position: sticky;
    top: 0;
    width: 100%;
    background: var(--nav-bg-color);
    transition-property:width,translate;
    transition-duration: 150ms;
    tranistion-timing-function:  ease-in-out;
    
    anchor-name: --target-active;
    scroll-target-group: auto;
		/*@container  scroll-state(scroll: stuck) {*/
    @container scroller scroll-state(scrollable: top) {
      width: min(80%,700px);
      translate:0 var(--nav-y-scroll);
      border-radius: 9in;
      background-color: var(--nav-bg-color-scroll);
      backdrop-filter: blur(var(--nav-blur-scroll));
    }
    /* anchor positioined hover and current indicators if supported */
    @supports selector(:target-current) {
      &::before,
      &::after{
        content: '';
        position: absolute;
        transition: all 150ms ease-in-out;
        inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
        border-radius: inherit;
        z-index: -1;
      }
      /* active target indicator */
      &::before{
        background: var(--nav-target-color);
        position-anchor: --target-active;
      }
      /* hover indicator */
      &:.........完整代码请登录后点击上方下载按钮下载查看