CODEWITHSUNDEEP
jquerycssviewport-units
Monti
Monti

Reputation: 11

How can I use jQuery to input a vh property instead of px for scrolling nav?

I am trying to create a nav that fades in after 100vh, but I can only find an example that uses a px value instead of vh. Is there a way to return a window height value into jQuery to accomplish this? Thanks in advance <3

Instead of 860px, I need it to be equivalent to 100vh, or equivalent to the height of the window viewport

      (function($) {
      $(document).ready(function(){
          $(window).scroll(function(){
              if ($(this).scrollTop() > 860) {
                  $('#navbar').fadeIn(200);
              } else {
                  $('#navbar').fadeOut(200);
              }
          });
      });
  })(jQuery);

Upvotes: 1

Views: 768

Answers (1)

Eduard Void
Eduard Void

Reputation: 2714

No it is not possible. But vh is defined as percentual height of the viewport. So you can get the viewport height:

$(window).height();

It will return 860px (in your example) then divide it by 100 and you have how many pixels stand for 1vh unit.

var viewportHeight = $(window).height(); // == 100vh
 (function($) {
      $(document).ready(function(){
          $(window).scroll(function(){
              if ($(this).scrollTop() > viewportHeight) {
                  $('#navbar').fadeIn(200);
              } else {
                  $('#navbar').fadeOut(200);
              }
          });
      });
  })(jQuery);

Upvotes: 2

Related Questions