Scroll Indicator Using JavaScript | HTML, CSS & JavaScript

// Scroll Indicator Using JavaScript | HTML, CSS & JavaScript //

---------------- Social Media ----------------

Music :
(free) Joey Badass type beat x 90s boom bap hip hop instrumental | 'As Liquid' prod. by PROCEES
MUSIC CREDIT - PROCEES

(free) Dave East x Wu-Tang type beat x Boom Bap Cypher beat | 'Right or Wrong' prod. by B YOUNG
MUSIC CREDIT - B YOUNG
✘ Instagram ⇒ @byoungbeats

Thanks for watching !

[codegrid]

These are some of the books that can help you learn web designing -

[masala-tea]

This was actually badass! Thanks for this mate!!!

[crystallized]

This is what I was looking for. Thank you!

[symphonyofyourdeath]

I really love your videos, it's a good way to remember why i love web design.

[mdkhaled]

cool, great and thank you so much to our help some new think ...

[tlo]

I want to see codegrid make a fixed header for a horizontal website site. Is it possible?

[siriusgd]

Your videos are very interesting. I can't wait to try some of these in the code I am writing. Keep them coming. Do you have one with expanding text boxes? (click on the line of text and it inflates to show more)

[GodOfGangsters]

Hi bro can u make a video on making a theme using php and bootstrap?

[leonardototti]

Nice Video, but, this create a vertical scroll on firefox for me. someone know how to solve that bug?

[ALulzyApprentice]

This is very cool. I see you are using Atom, and in an older video you were using Brackets. what are your thoughts about VS Code?

I've tried them all, yet only used Sublime and now VS Code.

[fernandomatarrita]

hey thanks for all the videos! you are awesome!
can you make a video making text shuffle?

[Keiturna]

Hey ! Are you going to re-upload your "Off Canvas Navigation | HTML, CSS & JavaScript" you posted this week ? It seems that it's been deleted :c
Thanks for your content !

[flammea_]

Nice video. Good code. What upsets me a little is your poor use of indentation. I would suggest working on it because it's important when somebody else has to look at your code

[Xfacta]

You really shouldnt use a scroll event to do that much stuff... its awful for performance. Use requestAnimationFrame() instead.

[tholeb]

Hello, am I the only one who cannot acces to the source code ? It says that the folder doesn't exist... (And very good video btw)

[julienr]

pour ceux qui ce demande ou et l'erreur dans leur jscode voila une autre version avec une correction pour firefox


$(window).scroll(function() {
var wintop = $(window).scrollTop(), docheight =


$(document).height(), winheight = $(window).height();
var scrolled =

$('.scroll-line').css('width', scrolled + '%');
});

[ikezedev]

Share your code on codepen.io ...Nice one

[snakecharmer]

without jquery:

let scrolled = function() {

let bar =

var body = document.body,
html = document.documentElement;

var height = Math.max(
body.scrollHeight,
body.offsetHeight,
html.clientHeight,
html.scrollHeight,
html.offsetHeight
);
var scrollheight = window.scrollY;
var val = scrollheight/(height-600) * 100;
bar.style.width = val + "%";
};