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

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:
https://i.stack.imgur.com/QJxYm.png

Img shrunk when scrolled down:
https://i.stack.imgur.com/UGywm.png

Img remains shrunk when scrolled back up and is supposed to go back to default like the first image:
https://i.stack.imgur.com/dDMHo.png

Contents hide

Answers:

Method 1

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Check your devtools console! – If your code crashes before resizing the image, it – well – won’t resize the image.

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;
}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating