如何在JavaScript中使用PrognRoll和jQuery在网站中显示滚动进度条

本文概述

• 下载并包含PrognRoll
• 使用PrognRoll

你是否曾经去过一个网站, 那里的滚动似乎是无穷无尽的, 而且你读了又读, 而文档并不仅仅是停下来？最近, 许多网站(主要是发表长文章的页面)已经开始实现一种指示符, 该指示符显示在位于文档顶部的进度栏中, 当用户向下滚动时, 该指示符就会更新。进度取决于你向下滚动文章的距离(非常简单而酷炫的文章), 你认为吗？这可以帮助用户知道他离完成出版物还有多远。许多设计人员说, 顶部的进度条很有用, 并且与网页设计结合在一起, 但是开发人员认为此功能无用, 因为已经有一个滚动条, 其进度与滚动条几乎相同。顶端。你站在哪一边？

如果你正在寻找使用jQuery插件在网站中实现这种功能的方法, 那么你来对地方了。在本文中, 我们将解释如何使用jQuery插件PrognRoll在窗口中创建此进度栏。

下载并包含PrognRoll

PrognRoll是一个纤巧, 轻巧的jQuery插件, 可在页面上创建滚动进度条。它的使用和自定义非常容易, 并且仅压缩了966字节, 这使其更加出色。

要使用PrognRoll, 请下载源代码文件或在资源库中缩小版本。然后使用脚本标签添加对脚本的引用：

<script src="jquery.js"></script>
<script src="src/prognroll.js"></script>

如你所见, PrognRoll仅需要一个脚本文件, 可以使用JavaScript直接进行自定义(进度条的宽度和背景颜色)。

如果你愿意测试该库, 则可以简单地使用CDN：

<!-- jQuery as dependency -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- Include PrognRoll -->
<script src="https://cdn.rawgit.com/mburakerman/prognroll/master/src/prognroll.js"></script>

有关更多信息, 请在此处访问Github中项目的官方资源库。

使用PrognRoll

PrognRoll的用法非常简单, 它将处理进度条的创建, 因此你无需添加额外的标记。可以通过2种不同的方式初始化插件, 以遵循整个文档或可以在文档中滚动的自定义元素：

文档中的进度栏

要在整个文档中创建滚动进度条, 只需使用jQuery选择文档的body元素, 然后在其上初始化插件即可：

$("body").prognroll({
    //Progress bar height
    height: 5, //Progress bar background color
    color: "#03a9f4", // If you make it true, you can add your custom div and see it's scroll progress on the page	
    custom: false     
});

自定义元素中的进度栏

如果不是衡量整个文档的进度, 而是可以通过使用jQuery选择元素, 然后在其上应用插件来显示自定义元素的进度。请记住将custom属性设置为true：

$(".custom-element").prognroll({
    //Progress bar height
    height: 5, //Progress bar background color
    color: "#03a9f4", // Using custom element instead of the body
    custom: true     
});

编码愉快！