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

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

代码语言：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);
    
}

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