jquey实现文章小说阅读滚动进度条上方显示效果代码

代码语言:html

所属分类:加载滚动

代码描述:jquey实现文章小说阅读滚动进度条上方显示效果代码

代码标签: 小说 阅读 滚动 进度 上方 显示 效果

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

<!DOCTYPE html>
<html>

<head>
   
<meta charset="utf-8">
   
<meta http-equiv="x-ua-compatible" content="ie=edge">
   
<title>读书类页面阅读进度条效果</title>
   
<meta name="description" content="Neat">
   
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" user-scalable="no">
   
<style>
        html
, body{
       
min-height: 100%;
       
background: #fafafa;
   
}
   
*{
       
margin:0;
       
padding:0;
       
font-size: 12px;
   
}
    ul
{
       
list-style:none;
   
}
   
.hide{
       
display: none;
   
}
   
.lf{
       
float: left;
   
}
   
.lr{
       
float: right;
   
}
   
.red, .red a,.red a h5, .red a p{
       
color:#FF0000 !important;
   
}
   
.h20{
       
height: 20px
   
}
   
    body
{
       
max-width:1000px;
       
margin:0 auto
   
}
   
.header{
       
background: #fff;
       
width:100%;
       
height:40px;
       
line-height: 40px;
       
display: flex;
       
align-items: center;
       
padding:25px 1.5em 28px;
       
box-sizing: border-box;
       
position:fixed;
       
top:0;
       
left:0;
   
}
    header a
{
       
display: flex;
       
align-items: center;
   
}
    header img
{
       
width: 20px;
   
}
    header
.title{
       
flex:1;
       
text-align: center;
       
text-indent: -20px;
   
}
    header
.progress-bar{
       
height:3px;
       
position: absolute;
       
background: rgb(16 158 222);
       
width: 0;
       
bottom:0;
       
left:0;
   
}
   
   
.main-group{
       
padding:70px 1.5em 0;
       
box-sizing: border-box;
       
min-height: 100vh;
   
}
   
.main-group h3{
       
font-size: 2em;
       
margin:0.6em 0
   
}
   
.main-group p{
       
font-size: 1.4em;
       
text-indent: 2.2em;
       
margin-bottom:0.9em;
       
line-height:1.8em;
   
}
   
</style>
   
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
</head>

<body>
   
<header class="header">
       
<a href="#"><img src="//repo.bfw.wiki/bfwrepo/image/6082324daa860.png" alt=""></a>
       
<div class="title">斗破苍穹</div>
       
<div class="progress-bar"></div>
   
</header>
   
<div class="main-group">
       
<h3>第一章 陨落的天才</h3>
       
<p>“斗之力,三段!”</p>
       
<p>望着测验魔石碑上面闪亮得甚至有些刺眼的五个大字,少年面无表情,唇角有着一抹自嘲,紧握的手掌,因为大力,而导致略微尖锐的指甲深深的刺进了掌心之中,带来一阵阵钻心的疼痛…</p>
       
<p>“萧炎,斗之力,三段!级别:低级!”测验魔石碑之旁,一位中年男子,看了一眼碑上所显示出来的信息,语气漠然的将之公布了出来…</p>
       
<p>中年男子话刚刚脱口,便是不出意外的在人头汹涌的广场上带起了一阵嘲讽的骚动。</p>
       
<p>“三段?嘿嘿,果然不出我所料,这个“天才”这一年又是在原地踏步!”</p>
       
<p>“哎,这废物真是把家族的脸都给丢光了。”</p>
       
<p>“要不是族长是他的父亲,这种废物,早就被驱赶出家族,任其自生自灭了,哪还有机会待在家族中白吃白喝。”</p>
       
<p>“唉,昔年那名闻乌坦城的天才少年,如今怎么落魄成这般模样了啊?”</p>
       
<p>“谁知道呢,或许做了什么亏心事,惹得神灵降怒了吧…”</p>
       
<p>周围传来的不屑嘲笑以及惋惜轻叹,落在那如木桩待在原地的少年耳中,恍如一根根利刺狠狠的扎在心脏一般,让得少年呼吸微微急促。</p>
       
<p>少年缓缓抬起头来,露出一张有些清秀的稚嫩脸庞,漆黑的眸子木然的在周围那些嘲讽的同龄人身上扫过,少年嘴角的自嘲,似乎变.........完整代码请登录后点击上方下载按钮下载查看

网友评论0