Javascript changing h1 size/color/etc

Question

I am very new to javascript but have been trudging along. I am stuck now though. I am trying to get my header to shrink when the user scrolls down the page. I have gotten everything to work, except I can't figure out how to get javascript to resize just this one h1 (logo) element. Please help!!

my javascript:

var header, yPos;
function yScroll(){
header = document.getElementById('header');
yPos = window.pageYOffset;
if(yPos > 120){
    header.style.height = "36px";
    header.style.paddingTop = "0px";
    header.style.background = "#005A31";
} else {
    header.style.height = "120px";
    header.style.paddingTop = "10px";
    header.style.background = "#A8CD1B";
}
}

my HTML:

<div class = "container" id = "header">
STUFF HERE
<div class = "container" id = "logo">
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
    </div>
STUFF HERE
 </div>

Answer 1

In your case, everything is fine but you need to bind the function to document.

You can do as followed

window.addEventListener("scroll", yScroll);

Edit: For the size of text, you need to change font-size property. You're changing height which is the height of area.

You can do as followed:

First add h1 an id.

<h1 id="myH" ...

then

document.getElementById("myH").style.fontSize = "36px";