css实现粘性滚动文章章节导航效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现粘性滚动文章章节导航效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
:root {
	--linkheight: 2rem;
}

* {
	box-sizing: border-box;
  	margin: 0px;
  	padding: 0px;
}

html {
	scroll-behavior: smooth;
}

ul, ol {
	list-style: none;
}

ul {
  	background-color: rgb(0 0 0 / 0);
}

ul li {
    padding-left: 1rem;
}

.section-nav {
	width: 15em;
	position: fixed;
	top: 2rem;
  	right: 2rem;	
	padding-left: 0;
	border-left: 1px solid #ddd;
  	background-color: rgb(0 0 0 / 0);
}

.section-nav a {
	display: inline-block;
	text-decoration: none;
  	line-height: 2rem;
  	padding: 0 1rem;
	color: #202020;
}

.section-nav a:hover,
.section-nav a:focus {
	color: red;
	text-decoration: underline;
}

h1 {
	width: calc(100% - 7.5em);
	font-weight: 300;
  	margin: 2rem 0;
}

main {
	width: 90%;
	margin: 0 auto;
}

section {
	padding-bottom: 20rem;
	
}

section:nth-of-type(even) {
	padding-bottom: 70rem;
}

section:nth-of-type(1) {
  background:
    right 2rem top 2rem / 15em var(--linkheight) no-repeat linear-gradient(#ccc, #ccc);
    
}

section:nth-of-type(2) {
  background:
    right 2rem top calc(2 * var(--linkheight)) / 15em var(--linkheight) no-repeat linear-gradient(#ccc, #ccc);
    
}

section:nth-of-type(3) {
  background: right 2rem top calc(3 * var(--linkheight)) / 15em var(--linkheight) no-repeat linear-gradient(#ccc, #ccc);
  
}

section:nth-of-type(4) {
  padding-bottom: 0;
  background: right 2rem top calc(4 * var(--linkheight)) / 15em var(--linkheight) no-repeat linear-gradient(#ccc, #ccc);
  
}

section:nth-of-type(4) section:nth-of-type(1) {
  background: right 2rem top calc(5 * var(--linkheight)) / 14em var(--linkheight) no-repeat linear-gradient(#ccc, #ccc);
  
}

section:nth-of-type(4) section:nth-of-type(2) {
  background: right 2rem top calc(6 * var(--linkheight)) / 14em var(--linkheight) no-repeat linear-gradient(#ccc, #ccc);
  
}

section:nth-of-type(4) section:nth-of-type(3) {
  background: right 2rem top calc(7 * var(--linkheight)) / 14em var(--linkheight) no-repeat linear-gradient(#ccc, #ccc);
  
}

section:nth-of-type(4) section:nth-of-type(4) {
  background: right 2rem top calc(8 * var(--linkheight)) / 14em var(--linkheight) no-repeat linear-gradient(#ccc, #ccc);
  
}

section:nth-of-type(4) section:nth-of-type(5) {
  background: right 2rem top calc(9 * var(--linkheight)) / 14em var(--linkheight) no-repeat linear-gradient(#ccc, #ccc);
  
}

section:nth-of-type(4) section:nth-of-type(6) {
  background: right 2rem top calc(10 * var(--linkheight)) / 14em var(--linkheight) no-repeat linear-gradient(#ccc, #ccc);
  
}

section:nth-of-type(4) section:nth-of-type(7) {
  background: right 2rem top calc(11 * var(--linkheight)) / 14em var(--linkheight) no-repeat linear-gradient(#ccc, #ccc);
  
}

section:nth-of-type(4) section:nth-of-type(8) {
  background: right 2rem top calc(12 * var(--linkheight)) / 14em var(--linkheight) no-repeat linear-gradient(#ccc, #ccc);
 
}

section:nth-of-type(5) {
  background: right 2rem top calc(13 * var(--linkheight)) / 15em var(--linkheight) no-repeat linear-gradient(#ccc, #ccc);
 
}

section:nth-of-type(6) {
  background: right 2rem top calc(14 * var(--linkheight)) / 15em var(--linkheight) no-repeat linear-gradient(#ccc, #ccc);
  
}

section:nth-of-type(7) {
  background: right 2rem top calc(15 * var(--linkheight)) / 15em var(--linkheight) no-repeat linear-gradient(#ccc, #ccc);
  
}

section:nth-of-type(n),
section:nth-of-type(4) section:nth-of-type(n){
	background-attachment: fixed;
}
</style>




</head>

<body>
  <main>
    	<div>
    		<h1>Smooth Scrolling Sticky ScrollSpy Navigation</h1>
    		<section id="introduction">
    			<h2>Introduction</h2>
    			<p>…</p>
    		</section>
    		<section id="request-response">.........完整代码请登录后点击上方下载按钮下载查看