isotropic-2022
Share
Blog
Search
Menu

Adding A Scroll Indicator To An Oxygen Builder Website

By James LePage
 on July 19, 2020
Last modified on January 6th, 2022

Adding A Scroll Indicator To An Oxygen Builder Website

By James LePage
 on July 19, 2020
Last modified on January 6th, 2022

In this article we're going to discuss how to add a scroll indicator to Oxygen Builder. This is a very simple implementation of some basic JavaScript, CSS styling, and a single HTML element.

Scroll/progress indicators were very popular in the mid 2000s, but fizzled out in the early 2010s. Now, they're making a comeback with appearances on many major websites. Not only do they look cool, but they can be quite helpful to readers.

The Scroll Indicator - DEV

Especially if you publish long form content, incorporating a scrollbar on your website shows visitors how deep they are into the article.

We don't recommend hiding the vertical scrollbar, but some websites do this and a horizontal scroll indicator fixed to the header of the website provides important context to its visitors.

Many WordPress themes come with a scroll indicator built in, but the Oxygen Builder doesn't have a component for this. Luckily, it's very easy to add with a little bit of code and a single DIV + Code Block. let's get right into it.

Identify Where Your Scroll Bar Should Show

In most installations and implementations, scroll indicators are only included on blog articles and long form content pages. Once you've figured out where you want your scroll indicator to show, you can figure out how exactly it will be added to the website.

Oxygen Builder has templates, which you should definitely be using. We recommend using a template to add a scrollbar to your chosen range of pages and content. in most circumstances, this would involve adding the code and components discussed below to a single page template in Oxygen, which applies to all blog posts on the website.

That's what this tutorial is going to be adding our code and components to, but depending on your needs and requirements, you may choose a different template.

Add A Scroll Indicator To Oxygen Builder

Once you know what template you want to use, it's time to actually add the scroll indicator to your site build with Oxygen.

We will be doing this by adding a Div, code black, JavaScript, and CSS. That’s it.

The Classic Implementation

In this example, we will add the scroll bar to the very top of the page, directly under the header.

To do this, we place our scrollbar DIV directly at the top of the page. We then change the CSS ID, and add a new CSS class.

ID = scroll-indicator
Class = progress-bar

We then apply the following CSS styling to this using the “custom CSS” tab under advanced settings.

height: 8px;
background: #4caf50;
width: 0%;
position: fixed;
top: 0;
z-index: 1;Code language: HTTP (http)

You may need to mess around with the position and top to get it to work with your header.

Then, add a code block component to the inside of the div, like so:

Remove the default PHP “hello world”, and paste the following code into the JavaScript section of the component:

window.onscroll = function() {isotropicscroll()};

function isotropicscroll() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("scroll-indicator").style.width = scrolled + "%";
} Code language: JavaScript (javascript)

This is a fairly simple collection of JavaScript which Divides the current scroll position by the height of the page, and then applies it to the scroll of your CSS progress bar.

After applying the codes to the code block, save the page, and view it on the front end of your website. You should now have a scroll indicator on your Oxygen Builder website. Keep in mind, that if you are logged in as an administrator (or have the admin toolbar showing on the top of your website), it will be covering your scroll indicator. Simply use a “private browsing” tab to view your website as a visitor.

Another Scroll Indicator Implementation

In this implementation of the scroll indicator, we will be including it within a div. It won't span the full width of the page, and is one of the more popular implementations of this feature.

instead of being attached to the top of the page, our scroll indicator is included in a sticky sidebar. Within this sidebar, you could choose to show a table of contents, advertising, or more. This is used on website like Backlinkio and others.

First, make the sticky sidebar. This is done by containing the main post content within a column (In our case it is 60% wide). in the other column, we add a Div which will contain all of these sticky content. Make sure that the content doesn't get larger than the height screen.

The content within the Div is spaced with margins, but the Div itself has no margins or padding. To make it sticky, add this css (add the .sidebar class):

.sidebar {
position: sticky; position: -webkit-sticky; top: 50px;
}Code language: CSS (css)

The final element that we add to the div is our scroll indicator. It is created in the same way: Create the Div, change the ID, add the class, set up the CSS, add the code block, add the JavaScript, and you're good to go.

In this case, the only difference is that our div’s 100% width applies to the containing sidebar, not the full page.

Because the dev that contains it is sticky, the scroll indicator appears at the bottom of it as the user navigates through the page.

As you can see, this element of your website can really be included anywhere.

Conclusion

This article should have showed you how to easily add a scroll indicator to your oxygen builder website. If you have any questions, Requests for tutorials or comments, leave them in the section below!

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of CodeWP.ai, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram