使用jQuery addClass进行粘性导航_Jquery_Css_Html

使用jQuery addClass进行粘性导航

jquery css html

使用jQuery addClass进行粘性导航,jquery,css,html,Jquery,Css,Html,我正试图使用jQuery，通过向nav标记添加一个类，在向下滚动经过某个点时，使水平导航栏下降。如果我手动添加类，一切看起来都很好。我似乎无法获得jQuery代码来为我添加类。有什么建议吗？以下是指向我的代码笔的链接： HTML: JS: 我将您的选择器从$'.mainnav'更改为$'nav'，它成功了。注意，如果您手动添加该类，代码在else块工作，它会清除粘性，这可能意味着scrollTop>50如果永远不正确，您是否在没有web服务器的情况下在本地测试该代码？如果是，请从//code.更

我正试图使用jQuery，通过向nav标记添加一个类，在向下滚动经过某个点时，使水平导航栏下降。如果我手动添加类，一切看起来都很好。我似乎无法获得jQuery代码来为我添加类。有什么建议吗？以下是指向我的代码笔的链接：

HTML:

JS:

我将您的选择器从$'.mainnav'更改为$'nav'，它成功了。

注意，如果您手动添加该类，代码在else块工作，它会清除粘性，这可能意味着scrollTop>50如果永远不正确，您是否在没有web服务器的情况下在本地测试该代码？如果是，请从//code.更改脚本源。。到http://code... 请注意.mainnav！==。正如@Vohuman所说，看起来你也有一个输入错误，所以你可以保留选择器

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

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

$(window).scroll(function() {

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