粘性导航栏的动态视图端口计算

Question

我是JavaScript的新手，我似乎陷入了棘手的境地。目前我有一些代码，低于200px添加一个类，使导航栏粘。添加的代码可以在下面找到。

  function navbarCollapse () {    
    if ($("#mainNav").offset().top > 200) {
      $("#mainNav").addClass("navbar-shrink");
      $("#mainNav").removeClass("navbar-font");
    } else {
      $("#mainNav").removeClass("navbar-shrink");
      $("#mainNav").addClass("navbar-font");
    }
  }

  //Execute The Collapsing Navbar Function
  navbarCollapse();

//Scroll Event
  $(window).scroll(navbarCollapse);

我面临的问题是，在一台设备上200px与其他设备（如大型显示器）完全不同

我需要能够计算设备视口的高度，然后相应地执行代码。

非常感谢任何帮助。就像我说我是JavaScript的新手，我可能会错过一些简单的东西。

Answer 1

不是像这样做一个偏移，而是添加一个使用css的类并在那里进行计算。

.nav-offset {
    Top: 1%;
}