Hello readers, Today in this blog you'll learn how to create a Page Scroll Down Indicator Line using HTML CSS & JavaScript. Earlier I have shared many Navigation Menu Bar and some of them are Responsive and some of them are not. But there is no feature of Page Scroll Indicator Line. So now it's time to create Page Scroll Indicator Line using JavaScript.
Maybe you saw a top progress bar for showing scroll information on the many websites that indicate the page scroll status. Scroll Indicator is a line that fills up based on how much the user has scrolled up or down the webpage. They are usually placed at the top of the page or on the many you may have seen on the bottom of the Navigation Bar.
Today in this blog, I'll share with you this program (Page Scroll Down Indicator Line). At first, the indicator line that has been hidden. But when we scroll down then the indicator line starts showing. That indicator line starts from the left side of the webpage and the bottom side of the navbar which fills up with blue color.
If you're feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Page Scroll Down Indicator Line).
Video Tutorial of Page Scroll Down Indicator Line
If you like this program (Page Scroll Down Indicator Line) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use this program on your projects and websites. If you've some knowledge of HTML CSS & JavaScript then you can customize this indicator line according to your project requirements.
Page Scroll Down Indicator Line [Source Codes]
As always, before sharing the codes of this program (Page Scroll Down Indicator Line). Let's a few talk about the main tags and codes of this program. At first, In the HTML File, I created a <nav> and placed a <label> tag inside it. I used <label> tag for a logo. Then I created a <div> with the class name "scroll-line" for indicator line. After that, I created some another tags like <h1>, <h2>, <ul>, etc. and wrote some dummy texts inside it.
In the CSS File, first I reset default margins and paddings to 0; then using CSS selector (nav) I created a navbar and placed a logo on the left side of the navbar. After that, I created a scroll indicator line and filled this line with blue color then hide this line because we are only visible this line when we scroll the scroll bar.
Now, Let's go on the main part of this program that is JavaScript codes. In the JavaScript File, first I would like to inform you I used jQuery instead of JavaScript. Generally, jQuery is a JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript Codes on your website.
First I created a scroll function then I created three variables with a different name. After that, I store the values of scrollTop, document height, and window height in the variables. At last, I created another variable and calculated all the values and store them in this variable.
There are many things I left. Because I can't say all things in writing. I'm just talking about the main codes of this program. But, don't worry you'll understand all codes after getting the source code of this program.
To create this program. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file.
HTML FILE:
In the CSS File, first I reset default margins and paddings to 0; then using CSS selector (nav) I created a navbar and placed a logo on the left side of the navbar. After that, I created a scroll indicator line and filled this line with blue color then hide this line because we are only visible this line when we scroll the scroll bar.
Now, Let's go on the main part of this program that is JavaScript codes. In the JavaScript File, first I would like to inform you I used jQuery instead of JavaScript. Generally, jQuery is a JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript Codes on your website.
First I created a scroll function then I created three variables with a different name. After that, I store the values of scrollTop, document height, and window height in the variables. At last, I created another variable and calculated all the values and store them in this variable.
There are many things I left. Because I can't say all things in writing. I'm just talking about the main codes of this program. But, don't worry you'll understand all codes after getting the source code of this program.
To create this program. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file.
CSS FILE:
Post a Comment
We welcome relevant and respectful comments. Off-topic or spam comments may be removed.