jquery 2.2：固定在滚动上的导航栏不适用于 vh-unit答案

【问题标题】：jquery 2.2: navbar fixed on scroll not working with vh-unitjquery 2.2：固定在滚动上的导航栏不适用于 vh-unit
【发布时间】：2016-01-28 21:02:05
【问题描述】：

我只在我的主题上找到了这个，但在这里对我没有帮助：How to implement scroll to fixed effect?

我正在尝试实现一个导航栏，当用户滚动到标题部分时它会粘在顶部，如下所示： https://teamtreehouse.com/community/forum-tip-create-a-sticky-navigation-with-css-and-jquery-2

但是，由于我在这个项目中使用 vh 和 vw 单位，所以我在让 jQuery 工作时遇到了问题。它工作正常，如果我像使用 px 一样

...
if ($(this).scrollTop() > 400 )
...

但有

...
if ($(this).scrollTop() > $("#slider_part").height
...

它不工作。

请参阅下面的代码。并提前感谢您的回答！

My HTML:

<header id="slider_part">
  <div>...</div>
</header>
<div id="main-nav" class="navbar">
 <nav>...</nav>
</div>

CSS:

#slider_part {
   height: 85vh;
   width: 100%;
   overflow:hidden;
   position: fixed;
   top: 0;
   z-index: -100;
   }

#main-nav {
   position: relative;
   background: #DB2F27;
   -webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.12);
   box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.12);
   z-index: 150;
   border: none !important;
   }

.navbar {
  height: 15vh;
  width: 100vw;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  }

.main-nav-scrolled {
  width: 100vw;
  position: fixed !important;
  top: 0;
  }

jQuery:

var mn = $(".navbar");

$(window).scroll(function(){
    if ($(this).scrollTop() > $("#slider_part").height ) {
        mn.addClass("main-nav-scrolled");
    }
    else {
        mn.removeClass("main-nav-scrolled");
    }
});

【问题讨论】：

标签： jquery

【解决方案1】：

检查控制台中的错误，因为您错过了 () 的 .height() 方法：

if ($(this).scrollTop() > $("#slider_part").height() ) {

另一个使用.toggleClass()方法的建议：

$(window).scroll(function(){
    mn.toggleClass('main-nav-scrolled', $(this).scrollTop() > $("#slider_part").height());
});

在上面的例子中，当条件为真时，该类将被添加，当条件为假时，该类将被删除。

【讨论】：

非常感谢！不知怎的，我是个盲人！