jquery - 如何使用 jQuery 输入 vh 属性而不是 px 来滚动导航？

Question

我正在尝试创建一个在 100vh 后淡入的导航，但我只能找到一个使用 px 值而不是 vh 的示例。有没有办法将窗口高度值返回到 jQuery 中来实现此目的？提前致谢<3

我需要它等于 100vh，或者等于窗口视口(viewport)的高度，而不是 860px

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

Answer 1

不，这是不可能的。但 vh 定义为视口(viewport)的百分比高度。这样就可以得到视口(viewport)高度:

$(window).height();

它将返回 860px(在您的示例中)，然后将其除以 100，您就得到了 1vh 单位的像素数。

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