| 807
| <![CDATA[<script>
function initScrollEffect(parent, color = getComputedStyle(document.body).getPropertyValue('--color-primary'), content, pageYOnShow = 0) {
var bar = document.createElement("div");
bar.style.height = "5px";
bar.style.width = "0";
bar.style.position = "absolute";
bar.style.top = "100%";
bar.style.backgroundColor = color;
bar.style.left = "0";
bar.style.zIndex = "99999";
bar.style.transition = "0.2s";
bar.classList.add("bar-content-read");
parent.append(bar);
function updateBar(){
var topOffset = content.offsetTop;
var offset = content.offsetHeight;
var curScrollY = window.pageYOffset;
if (pageYOnShow) {
var contentOffsetBottom = content.offsetTop + offset;
if (curScrollY > pageYOnShow) {
parent.classList.add('show');
}
if (curScrollY > contentOffsetBottom || curScrollY <= pageYOnShow) {
parent.classList.remove('show');
}
}
var percentage = curScrollY * 100 / offset;
bar.style.width = percentage + "%";
if (percentage > 100) {
parent.classList.add('complete');
} else {
parent.classList.remove('complete');
}
}
document.addEventListener("scroll", updateBar);
}
</script>]]>
|
