2分钟阅读时间 (339个单词)
如何在您的Joomla网站上创建阅读栏
当您在杂志的页面向下滚动时，您可能已经注意到有一个蓝色的条（位于页面顶部菜单项下方）在移动。
这个条有时被称为“阅读进度条”，您可以获取许多扩展来实现这个功能。即使不知道如何复制粘贴，您也可以通过在Joomla网站上使用自定义HTML模块，在几分钟内完成相同的事情。
创建自定义HTML模块
您可以将此功能集成到Joomla网站中的许多方式，但我使用自定义HTML模块实现了它。该技术涉及三行HTML，十六行CSS和七行JavaScript，它们位于同一位置。模块的源代码如下所示
<div class="progress-container">
<div id="myBar" class="progress-bar"> </div>
</div>
<style>
.progress-container {
position: fixed;
top: 0px;
z-index: 2000;
width: 100%;
background-color: #f5f5f5 !important;
width: 100%;
height: 4px;
background: #ccc;
}
.progress-bar {
height: 4px;
background: #57b4fc;
width: 0%;
margin-bottom: 4px;
}
</style>
<script type="text/javascript">
// 当用户滚动页面时，执行progressiveScroll
window.addEventListener('scroll', progressiveScroll);
function progressiveScroll() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>您需要给这个模块一个标题（例如“进度条”）并分配一个模板位置，最好是页面的最顶部。最后一步是将此模块分配到页面——菜单项——在您的Joomla网站上。
您可以根据自己的需求和喜好，尝试不同的模板位置和页面。
就是这样。祝您享受。
其他资源
- Tim Davis 制作的视频教程可在 YouTube 上找到：https://www.youtube.com/watch?v=ZLIENKdFNI
本文基于作者网站之前发布的原创作品
翻译
在德语中阅读：[Ein Lese-Fortschrittsbalken für deine Joomla-Seite](https://www.jug-zueri.ch/artikel/ein-lese-fortschrittsbalken-fuer-deine-joomla-seite)
《Joomla 社区杂志》上发布的一些文章代表作者对特定主题的个人观点或经验，可能不代表 Joomla 项目官方立场
关于作者
通过接受，您将访问https://magazine.joomla.net.cn/外部第三方提供的服务
评论 6
有人试过这个吗？我感觉说明中缺少一部分
是的，我试过了，当然不起作用。
您是对的，关于文本过滤器确实缺少一条说明。
在CSS部分，有多个CSS属性，所以它们会相互覆盖。
在JS部分，第一行代码无法运行：“未捕获的语法错误：意外的符号‘.’”
这本杂志确实应该展示Joomla的最佳作品。这意味着在使用网页资产管理器并在发布前测试代码。
感谢，布莱恩。在准备这篇文章时，我从运行良好的网站上复制了源代码，犯了一个小（但致命）的错误。错误是JavaScript的第一行，它应该这样读取
（以及我们已经在其他地方讨论过）时的“文本过滤器”和禁止元素，我们可以有一个非常长的辩论，但我相信大多数有足够技术能力理解J!社区杂志文章的读者都会了解在TinyMCE中使用的限制；还有其他编辑器可用，不会删除脚本和/或样式块。
窗口.onscroll = progressiveScroll;
而不是文章中出现的“function window.onscroll ...”。我已经提交了更正到帖子。
我很想了解如何改进CSS，以消除“多个CSS属性...[相互覆盖]”的问题。
关于使用
几周前，我在Tim Davis的YouTube频道上看到了这个栏目的演示，并尝试了它。它对我有效，但我使用的代码不是来自这篇文章，而是来自迈克尔的主页（https://kuneze.com/blog/116-a-progressive-reading-bar-in-your-joomla-website-without-extensions）。
你好，感谢Michael提供的这篇文章和解决方案。我在使用Cassiopeia模板和“返回顶部链接”选项时遇到了问题。我在法国Joomla论坛上发了一个帖子，团队帮助我解决了这个问题。提出的并经过测试的解决方案是修改代码。
原始代码
窗口.onscroll = progressiveScroll;
新代码
window.addEventListener('scroll', progressiveScroll);
感谢这个建议。我已经更新了文章。