Crossing Slowly Crossing Slowly - 1 year ago 49
HTML Question

Styles created using JavaScript are not applied until page is refreshed

I have created a script that adds the scrollTop value to the height of a DIV

var scroll = $(this).scrollTop();

function scrollH() {
document.getElementById("overlay").style.height = scroll + 'px';

document.getElementById("overlay").addEventListener("scroll", scrollH());

I need this style to keep updating (I'm making a progress bar). Currently it only changes when I refresh the page.

Thanks in advance

(Sorry if I did not follow the correct question format for this site, this is my first question :L )

Answer Source

You want to apply styles via JavaScript after the DOM has loaded. JQuery helps with this:

$(document).ready(function() {
  //do something to css