粘稠的导航，在做什么:\

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;
}

任何反馈都将是最受欢迎的。这让我和一个朋友完全不知所措。

Answer 1

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

与您的问题无关，但是FYI:您对toggleClass的使用会有一些奇怪的结果；在用户滚动时，它将不断地切换类。