
Animated Gradient Background
July 30, 2024
Author Bio Box CSS in WordPress
July 30, 2024
A reading progress bar that fills as you scroll makes the experience better by giving you a visual indicator of where you are on the page, makes navigation more intuitive and fun.
CSS
/* ---------------------------------------------------------- */
/* Snippflow Reading Progress Bar */
/* ---------------------------------------------------------- */
#sf-reading-progress-bar {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 0%;
height: 5px;
background-color: #46A787;
margin: 0;
}
/* WP Admin Bar fix */
.admin-bar #sf-reading-progress-bar {
top: 32px;
}
@media screen and (max-width: 782px) {
.admin-bar #sf-reading-progress-bar {
top: 46px;
}
}
@media screen and (max-width: 600px) {
.admin-bar #sf-reading-progress-bar {
top: 0;
}
}
jQuery for Reading Progress Bar
$(document).ready(function() {
if ($('body').hasClass('single')) {
var totalHeight = $('main').outerHeight(true);
var footerHeight = $('footer').outerHeight(true);
var windowHeight = $(window).height();
console.log(totalHeight);
console.log(footerHeight);
if (totalHeight > 0) {
$('header').after('<div id="sf-reading-progress-bar"></div>');
$(window).scroll(function() {
var scrollPosition = $(window).scrollTop();
var scrollableHeight = totalHeight + footerHeight - windowHeight;
var progress = (scrollPosition / scrollableHeight) * 100;
progress = Math.min(progress, 100);
$('#sf-reading-progress-bar').css('width', progress + '%');
});
}
}
});