javascript - jQuery isn't working to make navigation icons appear after scrolling past 1vh

Question

I work in a web development environment that uses WordPress. The theme we use is ThemeCo's Pro.

I'm still learning javascript (so please forgive me if I'm really far off), and I'm trying to use jQuery to write a piece of code that will allow an element to appear after scrolling 1vh of the page. Can anyone help me understand why this isn't working? I can't tell if it's my code, or my theme might not be allowing it. The theme itself uses jQuery on the front end, but has a javascript file I may edit, but for the most part, the frontend editor is pretty reliable for code.

I'm using pieces from this question to help me write it, as well as referencing the jQuery library.

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  var minH = $(window).height() * 1;

  if (scroll >= minH) {
    $("#circle-menu").fadeTo(500, 1);
  } 
  else {
    $("#circle-menu").fadeTo(500, 0);
  }
});

question from:https://stackoverflow.com/questions/65892040/jquery-isnt-working-to-make-navigation-icons-appear-after-scrolling-past-1vh

Answer 1

Just to make sure I understand what you're trying to do, I'll quickly reiterate what your code does: Basically, minH is supposed to be 1vh, and if scroll is >= minH, you want #circle-menu to fade in.

That being said, I think we have to look at a couple potential issues with the code above:

1. 1vh is really just 1/100 of the viewport height, which can be calculated as:

// this is 1vh, which is what you're going for
$(window).height() / 100

As opposed to:

// this is 100vh
$(window).height() * 1

2. The second would be that you're using fadeTo. The difference between fadeIn/fadeOut and fadeTo is that fadeTo doesn't affect an element's display property. It only affects an element's opacity property. This means that if the theme's default value for the menu's display property is set to "none", fadeTo is not going to make it fade into sight. To get around this, in my opinion, it would be better to use fadeIn and fadeOut instead, especially since it doesn't seem like you're trying to control different levels of opacity (which is what fadeTo is really needed for).

I made a quick code snippet to demonstrate the above fixes.

  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    var vh = $(window).height() / 100;
    var minH = vh;

    if (scroll >= minH) {
      $("#circle-menu").fadeIn(500);
    } 
    else {
      $("#circle-menu").fadeOut(500);
    }
  });

p {
  margin-top: 10vh;
  height: 150vh;
  border: 2px solid #666;
}
#circle-menu {
  font-family: 'Segoe UI', verdana, sans-serif;
  font-size: 20px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  box-shadow: 1px 2px 3px rgba(50,50,50,0.1);
  z-index: 1;
  display: none;
  background-color: steelblue;
  color: white;
  padding-left: 20px;
  padding-top: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="circle-menu">Menu</div>
<p></p>