Question

我尝试使用jQuery通过向nav标签添加类向下滚动某个点来获取水平导航栏。如果我手动添加类，一切看起来都很好。我似乎无法获得jQuery代码来为我添加类。有什么建议？以下是我的CodePen的链接：http://codepen.io/anon/pen/ykqcs

HTML：

<body>
<header>
        <nav class="mainNav">
            <a href="#" id="logoLink"><img src="images/logo.svg" alt="Logo"></a>
            <ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
            <div class="clear"></div>
        </nav>
        <section id="intro">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod ante rhoncus molestie pellentesque. Pellentesque pulvinar est vitae ullamcorper bibendum. Morbi ornare libero quis ante egestas, ut tristique est pretium. Etiam tincidunt, nunc at aliquam iaculis, neque libero ultrices justo, in elementum risus nunc et nisl. Ut lobortis purus mi, id fringilla dui cursus ac. Maecenas enim nunc, sagittis vitae augue quis, aliquet ullamcorper quam. Nunc vitae eros interdum tortor malesuada ornare vitae tristique purus. Quisque at ornare eros, aliquam porttitor metus. Duis in justo mollis, blandit purus nec, sollicitudin enim. Morbi sagittis fringilla felis, id gravida risus tempus eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed at maximus nunc. Pellentesque volutpat mattis mi et finibus. Vivamus ullamcorper magna consequat massa ullamcorper tincidunt. Integer faucibus aliquam feugiat.
</p></p>
Vestibulum vitae posuere dui. Quisque ac dui quis magna ultricies dictum ut a odio. Donec ut molestie augue, eu finibus est. Praesent rhoncus nulla sit amet nibh venenatis sagittis. Mauris id nisi vehicula, luctus odio vitae, interdum ligula. Quisque porttitor enim rutrum mattis congue. Nam pulvinar malesuada est, placerat imperdiet lectus lobortis eget.
</p></p>
Nullam eget lorem sed neque maximus fringilla eu a sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque lobortis odio id lectus iaculis egestas. Mauris cursus eros sit amet gravida sagittis. Cras ultrices diam sit amet dignissim eleifend. Nunc vel luctus erat, non congue turpis. Curabitur fermentum blandit enim non facilisis. Vivamus urna libero, molestie semper tellus non, vestibulum vulputate mi.
</p></p>
In vulputate orci eget tempus porttitor. Ut eu magna in ante accumsan malesuada ut sit amet odio. Sed id suscipit ante. Quisque tempus gravida neque, et semper tellus ornare sit amet. Quisque facilisis tellus ut nisl euismod, vel ultricies nibh lacinia. Sed dignissim imperdiet elit, ac egestas tellus vehicula in. Vivamus vitae enim arcu. Aenean gravida, tellus quis ullamcorper ultrices, ante tortor tincidunt elit, a dapibus nulla urna at lorem. Nullam sit amet bibendum lacus. Proin lorem est, viverra et suscipit in, tincidunt vel leo. Sed porta lacinia sollicitudin. Integer rhoncus rutrum suscipit. Sed malesuada eros tortor, quis iaculis mi scelerisque eu. Donec sed efficitur nibh.
</p></p>
Aenean non ipsum sem. Phasellus tempor imperdiet fringilla. Vestibulum dictum ligula eu nibh convallis, sed imperdiet eros cursus. Curabitur eget leo imperdiet, dictum leo ac, blandit sapien. Sed sagittis vestibulum tristique. Donec eget turpis vehicula, posuere arcu vitae, dictum mi. Curabitur tempor quis est fringilla iaculis. Curabitur sed urna ut diam aliquet malesuada. Aliquam porta massa neque, eu feugiat lectus laoreet vitae. Morbi pulvinar ut sapien ut dignissim. Proin rhoncus, turpis in finibus maximus, orci libero vehicula purus, eget ullamcorper urna purus quis elit. Fusce semper tempor rhoncus. Nulla magna nisl, mattis in rutrum sed, lacinia sit amet nisl.</p>
        </section>
    </header>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</body>

CSS：

header nav.mainNav {
  padding: 10px 6.5%;
  position: fixed;
  top: -100px;
  z-index: 999;
  width: 87%;
  background-color: #ffffff;
  overflow: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0; }
  header nav.mainNav ul {
    list-style: none;
    float: right;
    width: 50%;
    text-align: right;
    display: table;
    vertical-align: middle; }
    header nav.mainNav ul li {
      display: inline-block;
      padding-left: 5%;
      padding-top: 40px; }
      header nav.mainNav ul li a:link, header nav.mainNav ul li a:visited {
        text-decoration: none;
        color: #222222;
        transition: all 0.3s ease-in-out 0s; }
      header nav.mainNav ul li a:hover, header nav.mainNav ul li a:active {
        color: #37C697; }
  header nav.mainNav a#logoLink img {
    width: 60px;
    height: auto;
    float: left; }

header nav.sticky {
  opacity: 1;
  top: 0px; }

JS：

$(window).scroll(function() {

    if ($(window).scrollTop() > 50) {
        $('.mainNnav').addClass('sticky');
    } else {
        $('.mainNav').removeClass('sticky');
    }
});

Answer 1

我将您的选择器从$（＆＃39; .mainNnav＆＃39;）更改为$（＆＃39; nav＆＃39;）并且它有效。

使用jQuery addClass进行粘性导航

1 个答案: