javascript - 粘性导航，idk 发生了什么 :\

Question

我的粘性导航有问题。问题似乎是我的 JS 没有应用我告诉它的类。你可以在这里查看http://test.makx.ca

这是我的代码。

<script>

$(window).scroll(function() {    
var scroll = $(window).scrollTop();
nav = $('.nav-bar').offset();
if (nav.top <= scroll) {
  $('.nav-bar').toggleClass('sticky-nav');
} else {}
});
</script>

HTML

<div class="row nav-row">
    <div id="nav-bar" class="medium-12 column nav-bar">
        <ul class="links">
            <li><a href="index.php">home</a></li>
            <li><a href="about.php">about us</a></li>
            <li><a href="pricing.php">pricing</a></li>
            <li><a href="contact.php">contact</a></li>
        </ul>
        <ul class="links-right">
            <li class="has-form">
              <div class="row collapse">
                <div class="large-7 small-7 columns">
                  <input type="text" placeholder="enter text">
                </div>
                <div class="large-3 small-4 pull-2 columns">
                    <a href="#" class="search button expand" style="padding-top: 0.6rem;
                    padding-bottom: 0.6rem;">Search</a>
                </div>
              </div>
            </li>
        </ul>
    </div>
</div>

CSS

.sticky-nav {
position: fixed;
top:0;
width: 100%;
display: block;
}

我们非常欢迎任何反馈。这让我和一个 friend 完全难住了。

Answer 1

您使用了错误的选择器。 .nav-bar 是一个类选择器，但是你想选择 id 为 nav-bar 的元素，而不是类 nav-bar .使用 #nav-bar 作为选择器。

与您的问题无关，但仅供引用:您对 toggleClass 的使用会产生一些奇怪的结果；当用户滚动时，它将不断地打开和关闭类。