Header resize on scroll 100% screen height - javascript

Question

This is the code where i would like to add 100% instead of pixels. Can anyone please help me with this code? I'm bad at javascript

function init() {
  window.addEventListener('scroll', function(e) {
    var distanceY = window.pageYOffset || document.documentElement.scrollTop,
      shrinkOn = 100,
      header = document.querySelector("header");
    if (distanceY > shrinkOn) {
      classie.add(header, "smaller");
    } else {
      if (classie.has(header, "smaller")) {
        classie.remove(header, "smaller");
      }
    }
  });
}
window.onload = init();

<header>
  <div class="navcontainer">
    <div id="logo"></div>
    <ul id="menu">
      <li data-menuanchor="firstPage"><a href="#firstPage">POČETNA</a>
      </li>
      <li data-menuanchor="secondPage"><a href="#secondPage">BIOGRAFIJA</a>
      </li>
      <li data-menuanchor="3rdPage"><a href="#3rdPage">RURALNI MOTIVI</a>
      </li>
      <li data-menuanchor="4thPage"><a href="#4thPage">REČNI MOTIVI</a>
      </li>
      <li data-menuanchor="5thPage"><a href="#5thPage">GRADSKI MOTIVI</a>
      </li>
      <li data-menuanchor="lastPage"><a href="#lastPage">KONTAKT</a>
      </li>
    </ul>
  </div>
</header>

Short answer no, you cannot convert to percentage for scroll positions. Compute the number 100% in pixels instead. — user6360214
– user6360214, Commented Oct 19, 2016 at 12:31

Abhishek Pandey · Accepted Answer · 2016-10-19 12:39:53Z

1

You cannot use 100% but you can do it by using window.innnerHeight

function init() {
    window.addEventListener('scroll', function(e){
        var distanceY = window.pageYOffset || document.documentElement.scrollTop,
            shrinkOn = window.innerHeight,
            header = document.querySelector("header");
        if (distanceY > shrinkOn) {
            classie.add(header,"smaller");
        } else {
            if (classie.has(header,"smaller")) {
                classie.remove(header,"smaller");
            }
        }
    });
}
window.onload = init();

answered Oct 19, 2016 at 12:39

Abhishek Pandey

13.6k8 gold badges41 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

JonSG Over a year ago

Good call, window.innerHeight is probably better than screen.height as I was suggesting.

Mihailo Jančić Over a year ago

Thanks, it seem simple. I tried with shrinkOn = screen.height and shrinkOn = window.innerHeight and it almost works. The thing is i'm making one page website with full page scroll, so when i scroll to next page header doesn't change, only when i scroll one more time.

Mihailo Jančić Over a year ago

it looks like it's missing just one more pixel :)

Mihailo Jančić Over a year ago

Thanks for your help guys

Mihailo Jančić Over a year ago

Sorry, this code changes header afterwindow height, do you know maybe how can it change on screen height

|

Collectives™ on Stack Overflow

Header resize on scroll 100% screen height - javascript

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related