Question

我有一个导航栏，设置为'display：none;'在我的CSS样式表上。当我向下滚动页面上的一定数量的像素时，我的Jquery文件会添加一个类。该类将显示属性更改为“阻止”，使导航栏可见。

请参阅下面的HTML

      <section class="content">

    <div class="post-details">
      <span class="date">Published 28/02/2018 by: <p><a href="#"></a>David Williams</p> </span>
      <div class="about">
        Lorem ipsum dolor sit amet,  consectetur adipisicing elit.
        Dolorum reiciendis, unde nobis, fugiat temporibus
        excepturi tempore dolor provident dolorem rem nostrum,
        eligendi nisi id voluptates atque vitae eveniet explicabo
        reprehenderit! Lorem ipsum dolor sit amet,  consectetur
        adipisicing elit. Dolorum reiciendis, unde nobis, fugiat
        temporibus excepturi tempore dolor provident dolorem
        rem nostrum, eligendi nisi id voluptates atque vitae eveniet
        explicabo reprehenderit!
      </div>
      <a href="#">View/Read More</a>
    </div>
    <a href="" ><div class="post"></div></a>

    <div class="full-width search">
      <div class="search-form">
        <input type="text" name="" placeholder="Search This Blog" autofocus="autofocus">
        <div class="close"><i class="fa fa-times" aria-hidden="true"></i></div>
      </div>
    </div>
    <nav class="one missing">
      <div class="logo">
      <img src="img/final15Logo.png">
      </div>
      <div class="container teal borderYtoX">
        <li><a href="#" class="active">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">ARCHIVE</a></li>
        <li><a href="#">SUBSCRIBE</a></li>
        <li><a href="#">CONTACT</a></li>
        <li><a class="search-icon"><i class="fa fa-search" aria-hidden="true"></i></a></li>
      </div>
    </nav>

    <div class="post-details">
      <span class="date">Published 28/02/2018 by: <p><a href="#"></a>David Williams</p> </span>
      <div class="about">
        Lorem ipsum dolor sit amet,  consectetur adipisicing elit.
        Dolorum reiciendis, unde nobis, fugiat temporibus
        excepturi tempore dolor provident dolorem rem nostrum,
        eligendi nisi id voluptates atque vitae eveniet explicabo
        reprehenderit! Lorem ipsum dolor sit amet,  consectetur
        adipisicing elit. Dolorum reiciendis, unde nobis, fugiat
        temporibus excepturi tempore dolor provident dolorem
        rem nostrum, eligendi nisi id voluptates atque vitae eveniet
        explicabo reprehenderit!
      </div>
      <a href="#">View/Read More</a>
    </div>
    <a href="" ><div class="post"></div></a>

请参阅下面的JQuery。

$(window).scroll(function(){
var scroll = $(this).scrollTop();
console.log(scroll)
if(scroll >= 1300) {
$('nav.one').addClass('show');
  } else {
$('nav.one').removeClass('show');
 }
})

见下面的原始课程。

.missing {
  display: none;
}

请参阅下面添加的课程。

.show {
  display: block;
}

当我向下滚动1300px时，这一切都正常工作我的导航栏出现了，但是我希望它在2100Px之后再次消失。这是我正在使用的代码，而不是工作。

$(window).scroll(function(){var scroll = $(this).scrollTop();
  console.log(scroll)
    if(scroll >= 1300 && scroll <= 2100) {
    $('nav.one').addClass('show');
  } else {
    $('nav.one').removeClass('show');
  }
})

使用此代码，当我滚动超过2100px时，它会跳回到2000px。有人可以帮忙吗？有什么东西显而易见吗？

滚动时JQuery addClass / removeClass

0 个答案: