Use ViewPort as units in JavaScript

Question

I am looking to replace the "100" and "101" in the following script by a value in VH. I have tried everything that has come to mind but cannot figure it out, Google doesn't seem to have the answer either.

   $(document).ready(function() {

  $(window).scroll(function () { 
      console.log($(window).scrollTop())
    if ($(window).scrollTop() > 100) {
      $('#nav_bar').addClass('navbar-fixed');
    }
    if ($(window).scrollTop() < 101) {
      $('#nav_bar').removeClass('navbar-fixed');
    }
  });
});

Thank you.

Possible duplicate of [Using jQuery To Get Size of Viewport](https://stackoverflow.com/questions/3044573/using-jquery-to-get-size-of-viewport) — JJJ, May 05 '18 at 05:33

score 0 · Answer 1 · answered May 05 '18 at 06:11

$(document).ready(function() {
  $(window).scroll(function () { 
    console.log($(window).scrollTop())
    if ($(window).scrollTop() > $(window).height()) {
      $('#nav_bar').addClass('navbar-fixed');
    }
    if ($(window).scrollTop() < (101 * $(window).height())/100) {
      $('#nav_bar').removeClass('navbar-fixed');
    }
  });
});

$(window).height() returns the viewport's height.

Use ViewPort as units in JavaScript

1 Answers1