Else statement not readjusting height and width of img after If statement adjusts the img-CodePudding

When the user scrolls more than 50px down the viewport, my if statement adjusts a bunch of elements in the header. Once the user scrolls back to less than 50px, it readjusts back to normal with an else statement. Currently, everything functions fine besides my img height and width within the else statement. For some reason, the code doesn't bounce back to 60px in height after shifting to 30px in the if/else statement. Please let me know what you think is wrong with the else statement. I assume is has something to do with catching images specifically.

HTML

<img class="header-logo-img header-logo-img-illustration" id="header-logo-img-illustration" src="../imgs/NoahPointingIllustration.png" alt="logo illustration" height="60" width="60">

CSS

// When the user scrolls down 50px from the top of the page, resize the header
    $(document).ready(function () {
      window.onscroll = function() {
        dynamicHeaderOnScroll()
      };
    
      function dynamicHeaderOnScroll() {
        if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
          document.getElementById("header-wrapper").style.maxWidth = "100%";
          document.getElementById("header").style.paddingTop = "10px";
          document.getElementById("header").style.paddingBottom = "0.4em";
          // Reposition "close hamburger menu" icon
          document.getElementById("closebtn").style.margin = "-43px 0 0 0";
          document.getElementById("header-logo-img-illustration").style.height = "30px";
          document.getElementById("header-logo-img-illustration").style.width = "30px";
        } else {
          document.getElementById("header-wrapper").style.maxWidth = "900px";
          document.getElementById("header").style.paddingTop = "55px";
          document.getElementById("header").style.paddingBottom = "0.25em";
          document.getElementById("header-homepage").style.paddingBottom = "1em";
          // Reposition "close hamburger menu" icon
          document.getElementById("closebtn").style.margin = "0";
          document.getElementById("header-logo-img-illustration").style.height = "60px"; // ISSUE HERE
          document.getElementById("header-logo-img-illustration").style.width = "60px"; // ISSUE HERE
        };
      };

Large image in header on page load:

You can see here that the code crashes due to the following error:

Uncaught TypeError: Cannot read properties of null (reading 'style')
    at dynamicHeaderOnScroll (main.js:144)
    at window.onscroll (main.js:130)

...which happens in this line:

document.getElementById("header-homepage").style.paddingBottom = "1em";

So, it complains about not being able to read properties, in particular style, from the value null. From that follows that document.getElementById("header-homepage") must have returned null so that you essentially did null.style.paddingBottom, hence the error. And why is that so? Because there is no element with ID header-homepage on your page.

Side note: It would make a lot more sense to have those styles in CSS depending on a class.

For example, you can use a class is-scrolled on the <body> tag - and all your JS code would need to do then is document.body.classList.add('is-scrolled') (and remove, of course).

You would then define the rules in your stylesheet such as this:

body.is-scrolled #closebtn {
  margin: -43px 0 0 0;
}