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.........完整代码请登录后点击上方下载按钮下载查看