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是一个类选择器，但您要选择标识为nav-bar的元素，而不是类nav-bar。请改用#nav-bar作为选择器。

与您的问题无关，但仅供参考：您使用toggleClass会产生一些奇怪的结果;当用户滚动时，它会不断地打开和关闭班级。

粘性导航，idk正在发生什么：\

1 个答案: