dev-resources.site
for different kinds of informations.
Reading Progress Bar
Published at
1/10/2025
Categories
css
html
jquery
wordpress
Author
snippflow
Author
9 person written this
snippflow
open
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.
$(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 + '%');
});
}
}
});
Full article: Reading Progress Bar
CSS Snippets
jquery Article's
30 articles in total
Reading Progress Bar
currently reading
Add Row (Clone)
read article
Make PDF to Images converter in html, css, and, java, bootstrap and jquery
read article
$( "#x" ).prop( "checked", false ) is not working
read article
5 Top Libraries Each Frontend Developer Must Know
read article
Ditch the jQuery Crutch and Embrace Vanilla JS 👨🏽💻
read article
Level Up Your Web Development: Why You Should Ditch jQuery for Vanilla JavaScript
read article
Why Does jQuery or a DOM Method Like `getElementById` Fail to Find an Element?
read article
SimpleTimepickerRB: A Lightweight and Customizable Timepicker Plugin for jQuery
read article
A Comprehensive Guide with XHR, Fetch API, Axios and jQuery AJAX
read article
Unleash Your Web Development Skills with the 'Quick Start with jQuery' Course
read article
Building a One-Page CRUD Application with Laravel and jQuery
read article
Here's How I implement cursor-based pagination in jQuery Datatable.
read article
Using jQuery
read article
HeatColor UDF (based on jQuery library)
read article
Jquery select2 css height problem fixed
read article
Why jQuery Exists
read article
Scientific problems are not real problems for programmers
read article
Master jQuery.each() with These 5 Essential Examples
read article
Master jQuery.each() with These 5 Essential Examples
read article
Total.js UI :Two Beginner Projects to understand Paths and Data Binding
read article
Implementing Infinite Scroll with Laravel and jQuery
read article
jQuery vs React – Which One Is Better For Your Project?
read article
Tutorial Menggunakan jQuery pada WordPress dengan benar
read article
Uncovering the Magic: 10 Fascinating Facts About jQuery
read article
Asynchronous Requests in JavaScript: AJAX, JQUERY, FETCH and AXIOS.
read article
jQuery's Role in Modern Web Development: Beginnings, 2024, and Beyond
read article
Vanilla JS Effect Methods
read article
Common JavaScript "event Handler" Mistake
read article
Recommended Project: Implement User Login Function
read article
Featured ones: