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

【问题标题】：How can I use jQuery to input a vh property instead of px for scrolling nav?如何使用 jQuery 输入 vh 属性而不是 px 来滚动导航？
【发布时间】：2018-01-15 08:23:34
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery css viewport-units

【解决方案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);

【讨论】：