pageYOffset not working correctly

[htran7228]

I made a javascript where a nav bar will appear when the page is scrolled down 100 px. However, I haven;t been able to get the code to work and make it appear when I scroll down and assume it maybe a variable problem so I declared them on both function. Any suggestion and help would be appreciated.

Edit fiddle - JSFiddle - Code Playground

The full code is on the link

var scrolldown;

     function navScroll() {

    var navi = document.getElementById('nav');

    var top = document.getElementById('startScroll');
     scrolldown = top.pageYOffset;

    if(scrolldown == 100) {
        navi.style.display = "block";


function start(){
  var top = document.getElementById('startScroll');
  var navi = document.getElementById('nav');
  top.addEventListener("scroll",navScroll);

}

window.onload = start;

[m3g4p0p]

Hi @htran7228, one problem is that you have to add the scroll event listener to the window (and check for window.pageYOffset), not that top element as this isn’t scrollable. Another problem is that the .pageYOffset is rarely exactly 100, so you’d have to check it’s equal or greater than instead:

var nav = document.getElementById('nav')

window.addEventListener('scroll', function () {
  if (window.pageYOffset >= 100) {
  	nav.style.display = 'block'
  }
})

[htran7228]

Ah thank you I didn’t know it had to be used with just window.