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

Question

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

而不是860px，我需要它等同于100vh，或等效于窗口视口的高度

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

Answer 1

不，不可能。但是vh被定义为视口的百分比高度。所以你可以得到视口高度：

$(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);