How to use visual elements to tell a story Let's start with an interesting fact that will amaze you. Do […]
I'm the owner and founder of PIT Designs. I love creating digital presence and creative digital solutions for our clients.
Posted
3 years ago on April 8th, 2020.
Related To:
The Ultimate Guide to Choosing a Great Domain Name for Your Business
Choosing the right domain name for your business is a critical step in building a strong online presence. Your domain […]
6 Mistakes to Avoid When Creating a React-Native App
React Native is a leading cross-platform app development framework that has more than one and half thousand active contributors. The […]
Will Elon Musk Turn Twitter into a Super-App?
Elon Musk envisions a future where mobile apps are consolidated into one-stop shops within a single platform. Will he create a "super app" to rule them all in 2023? Learn about the challenges he faces and the potential impact on companies like Twitter and Apple's App Store.
8 Steps to Start Your Shirt Printing Business like a Pro
The custom design market is rising daily, and its demand is relatively easy to fulfil if you have the right […]
What Is Out-Of-Home Advertising - Types & Strategies
OOH, or out-of-home advertising has been around for a long and is still one of the best ways to contact […]
Best Tools That Make Content Readability Better
These three best tools can enhance content readability: 1) Paraphrasetool.ai 2) Word-counter.io 3) Hemingway Editor. Use these tools and achieve perfection in your work.
How to Lock Entire WordPress Website for the Public Without Plugins
You can lock your entire WordPress website and make it only visible to logged-in users without using a plugin by adding a simple code.
Bloggers and online content creators use posts to reach thier audience. And just like with everything visual today, the user experience (UX) is key. One way to improve the visual of your blog posts, is by including a scroll progress bar.
Table of Contents
What's a scroll progress bar indicator?
The scroll progress bar indicator, is the horizontal line on top of the page. That moves according to your position within the post. (Showing how far down you've scroll) or how much of the article is left.
Add Code Block
First of all, open the single post template in Oxygen builder. Assuming you're adding this to the Blog posts only. However you can add it to any post type.
Add on top of the structure a Code Block.
Add on top of the structure a Code Block.
Code Block Settings
Go to Advanced > Layout > Position : Fixed
Add Class & ID
Add CSS Class to the Code Block: bar-line
Add CSS ID to the Code Black: bar-header
Add CSS ID to the Code Black: bar-header
Add CSS Code
Now add this code to the CSS of the same Code Block:
.bar-line {
height: 8px;
background: #00A99D;
width: 0%;
z-index: 1;
}
Change the background color as desired.
.bar-line {
height: 8px;
background: #00A99D;
width: 0%;
z-index: 1;
}
Change the background color as desired.
Add JS Code
window.onscroll = function() {oxyScrollFunc()};
function oxyScrollFunc() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("bar-header").style.width = scrolled + "%";
}
function oxyScrollFunc() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("bar-header").style.width = scrolled + "%";
}
And there you have it. A nice scroll bar indicator for Oxygen Builder based posts. With simple CSS and JS.