jquery实现的文章阅读滚动进度条导航效果代码-html代码-BFW代码库

代码语言：html
代码描述：jquery实现的文章阅读滚动进度条导航效果代码
下面为部分代码预览，完整代码请点击下载或在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">
    <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:300,400|Merriweather:300'>

    <style>
        *, *:before, *:after {
            box-sizing: border-box;
        }

        .clearfix:before,
        .clearfix:after {
            content: " ";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

        body {
            background-color: #D6E1E5;
            color: #6B7072;
            font-size: 100%;
            margin-bottom: 10em;
        }
@media only screen and (min-width: 700px) {
            body {
                font-size: 110%;
            }
        }
@media only screen and (min-width: 800px) {
            body {
                font-size: 120%;
            }
        }

        h1, h2, p {
            padding: 0 50px;
            line-height: 1.75;
            margin: 0 auto;
            max-width: 1100px;
        }
@media only screen and (min-width: 800px) {
            h1, h2, p {
                padding: 0 100px;
            }
        }

        h1, h2 {
            font-family: 'Open Sans';
            font-weight: 300;
            font-size: 250%;
            line-height: 1.5;
        }

        h1 {
            margin-top: 1.5em;
            margin-bottom: 1.5em;
            color: #DB5B33;
        }

        h2 {
            margin-top: 2em;
            margin-botttom: 1em;
            color: #4598B5;
        }

        p {
            font-family: 'Merriweather';
            font-weight: 300;
            font-size: 100%;
            margin-top: 2em;
            margin-bottom: 2em;
        }

        a {
            color: #2d2f30;
            text-decoration: underline;
            transition: color 100ms ease-in;
        }
        a:hover, a:focus {
            color: #DB5B33;
        }

        .progressbar {
            display: none;
            margin: 4em 0;
        }
@media only screen and (min-width: 650px) {
            .progressbar {
                display: block;
            }
        }
        .progressbar .shim {
            display: none;
            width: 100%;
        }
        .progressbar .holder {
            position: relative;
            font-size: 85%;
            padding: 1.8em 0 0 0;
            background-color: #D6E1E5;
            box-shadow: 0 0.5em 1.5em #D6E1E5;
        }
@media only screen and (min-width: 750px) {
            .progressbar .holder {
                font-size: 90%;
            }
        }
@media only screen and (min-width: 900px) {
            .progressbar .holder {
                font-size: 95%;
            }
        }
        .progressbar .holder .bar {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #B6D1DA;
        }
        .progressbar .holder .bar .indicator {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            background-color: #4598B5;
        }
        .progressbar .holder .labels {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 2em;
            text-align: center;
        }
        .progressbar .holder .labels i {
            display: block;
            position: relative;
            float: left;
            cursor: pointer;
        }
        .progressbar .holder .labels i::before {
            position: absolute;
            bottom: 0;
            left: 50%;
            display: block;
            content: '';
            width: .9em;
            height: .9em;
            border-radius: 50%;
            border: solid 3px #B6D1DA;
            background-color: #D6E1E5;
            -webkit-transform: translateX(-50%) translateY(50%);
            transform: translateX(-50%) translateY(50%);
            transition: border-color 100ms ease-in, background-color 150ms ease-in;
        }
        .progressbar .holder .labels i::after {
            display: block;
            content: attr(data-label);
            position: relative;
            top: 0;
            padding-bottom: 1.8em;
            font-family: 'Open Sans';
            font-weight: 400;
            color: #4598B5;
            transition: color 150ms ease-in, top 100ms ease-out;
        }
        .progressbar .holder .labels i:hover::before, .progressbar .holder .labels i:focus::before {
            background-color: #B6D1DA;
        }
        .progressbar .holder .labels i:hover::after, .progressbar .holder .labels i:focus::after {
            top: -.2em;
        }
        .progressbar .holder .labels i.read::before {
            border-color: #4598B5;
        }
        .progressbar .holder .labels i.read:hover::before, .progressbar .holder .labels i.read:focus::before {
            background-color: #4598B5;
        }
        .progressbar .holder .labels i.reading::after {
            color: #222;
        }
        .progressbar .holder .labels i.reading:hover::after, .progressbar .holder .labels i.reading:focus::after {
            top: 0;
        }
        .progressbar.fixed .holder {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1;
        }
        .progressbar.fixed .shim {
            display: block;
        }
    </style>

</head>

<body>
    <h1>阅读进度条</h1>
    <p>
        这是一个jQuery“粘性”阅读进度条的演示，我最近开发了它。当视口太窄时，它会隐藏在滚动条上的视口顶部，以区段和在每个区段中显示读取进度。它也可以用于导航。
    </p>
    <p>
        进度条的HTML是基于用于定义每个部分（在此情况下，H2标题）的元素在PaGeload上动态生成的。
    </p>

    <h2>Gouda</h2>
    <p>
        适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。
    </p>
    <p>
        Ex prompta constituam vis, an eos deleniti tractatos, nam alii aliquando temporibus eu. Duo ei nulla animal elaboraret. Meis adhuc id vix, ne nam nihil graecis antiopam. Vel ea eligendi perfecto repudiandae, no pri tation deterruisset. Ei unum nihil sea, tantas minimum invidunt vel an, nominavi delicata posidonium cum no. Porro adversarium cum eu, admodum lucilius nec at, eu magna definitionem has. Nam lorem movet tollit in.
    </p>
    <p>
        Harum euismod assentior ei has, vidisse principes consetetur ne vel. No iriure eripuit quo, integre persequeris ex vis, ne has autem probatus. Elit copiosae efficiendi te sea, duo ad aeterno graecis, an populo assueverit sit. Vis an fabulas graecis expetenda, natum quaestio at vim. Cu sed nisl utroque vituperatoribus, ne vim stet ocurreret.
    </p>
    <p>
        Nihil iracundia usu in, sit ex admodum liberavisse necessitatibus, menandri dissentiunt at his. Pri at saepe tamquam expetenda, cu eros mollis blandit eos, possit quaestio ut nec. Te expetenda evertitur vis, semper dictas eleifend cum at. Mea deserunt maiestatis percipitur ex, te sea habeo percipitur, qui ne harum tritani persequeris. Eos eu quod dolore. Ius erat illum eu, tractatos mediocrem vim ea.
    </p>
    <h2>Brie</h2>
    <p>
        Sea in singulis delicatissimi, alia prima ei cum. Sed in quas dissentias reprehendunt. Paulo semper corpora ne pri, vis no iriure luptatum. Alii error diceret ius te, dolorum complectitur definitionem vix ea. Fugit atqui debitis ad his. Perfecto delicata senserit id has. Tempor inimicus erroribus eam ex.
    </p>
    <p>
        Pro falli eruditi sapientem ei, lucilius periculis ius ea. Eum veri meliore mentitum ex, ne erat graece per. In pro habeo simul vituperatoribus, pro minim noster utroque an. Partem delicatissimi cum et, no aeque nonumy urbanitas est. Sonet vivendum in nam. Nec porro ubique scripta in, veri saperet graecis vis cu, has cu dicat sanctus impedit. Mei in duis timeam invenire.
    </p>
    <h2>Manchego</h2>
    <p>
        Eos ex erant latine sanctus, at sea labore adolescens ullamcorper. Ut aeque veritus vis, no cum doming civibus adipiscing. Te mel eius quidam blandit, iudico nusquam pri ex.
    </p>
    <p>
        Probo dicunt his eu, eum et eirmod labitur accommodare. Duo tempor euripidis ut, his nostrud persecuti in. Tantas oportere ullamcorper sed no, id paulo vitae voluptatibus sea. Quo te aliquid nominati signiferumque. Ad has graecis gubergren, cu iracundia voluptatibus pri.
    </p>
    <p>
        Vero mediocrem salutatus ne mel. Ex prima justo volumus mei. Te sed nemore praesent interesset, eam evertitur similique comprehensam in. Ei modus minimum menandri mel, tollit perpetua eloquentiam qui ea. No modus iriure aliquip quo.
    </p>
    <h2>Camembert</h2>
    <p>
        Erroribus cotidieque ex quo, iisque habemus ex eos, vocent apeirian necessitatibus sit at. Sint partem invidunt te qui. His eros integre saperet at, vidit aliquip eos no. Qui ea veniam soleat periculis.
    </p>
    <p>
        Has idque volutpat percipitur ea, his ne elitr sanctus detraxit. Cu eos assum dolorum recusabo, eu mei omnes suscipiantur, at eos timeam regione. Duo quas explicari cu, habemus deterruisset vix ne. An quo ferri dicam forensibus, eu populo labore corpora nec, facete commune ancillae ut pro. Nam iusto placerat te.
    </p>
    <p>
        Antiopam mnesarchum temporibus cu nam, ei duo affert commune efficiendi. Usu inani efficiantur ex. Natum docendi tincidunt ex eum, qui ut diam veniam volutpat, ferri utinam munere eu vel. Ei cum liber perpetua gubergren.
    </p>
    <h2>Edam</h2>
    <p>
        Lorem ipsum dolor sit amet, in viderer periculis nam, delectus accusamus pro no. Sea nusquam partiendo consequat id, has tation temporibus consequuntur id. Fastidii liberavisse usu ad, prima civibus expetendis ex eum, est ex posse lucilius repudiare. Eu delenit sapientem molestiae nec, his ei cibo autem aliquando, impetus appellantur sea cu. Reque audiam ad his, case dignissim posidonium an duo, ex deleniti noluisse deterruisset usu.
    </p>
    <p>
        Et impetus aliquip mel, per quod probo accumsan et. Ea solum pertinacia .........完整代码请登录后点击上方下载按钮下载查看