更改滚动条上的导航栏

Question

当从顶部滚动大于 20 时，我想更改导航栏。我的代码可以工作，但是当缓慢向上滚动时会无限跳转。我该如何修复它？工作https://jsfiddle.net/gwuh4zc9/2/这是我的html：<!--Navbar--><div class="container-fluid shadow-sm bg-white">    <div class="container p-0">        <!--First Nav-->        <div class="Nav1 Z-index d-none d-sm-block">            <nav class="navbar navbar-expand-sm navbar-light p-0 py-1">                Nav 1            </nav>        </div>        <!--Second Navbar-->        <div class="Nav2 container-fluid Fixed d-none Z-index bg-white">            <div class="container p-0">                <nav class="navbar p-0 m-0 navbar-expand-sm bg-white navbar-light">                    Nav 2                </nav>            </div>        </div>    </div></div><div class="body">    Body</div>这是我的js代码：$(document).ready(function() {    $(document).scroll(function() {        if ($(this).scrollTop() > 20) {            $(".Nav1").addClass("d-none");            $(".Nav1").removeClass("d-sm-block");            $(".Nav2").addClass("d-sm-block");        } else {            $(".Nav1").removeClass("d-none");            $(".Nav1").addClass("d-sm-block");            $(".Nav2").removeClass("d-sm-block");        }    })})

Answer 1

发生这种情况是因为当您将Nav1display 设置为 none 时，它会从 DOM 中删除并且scrollTop值会发生变化。相反，你可以用不透明度隐藏它：

.hidden {

  opacity: 0;

}

并添加/删除此类：

if ($(this).scrollTop() > 20) {

  $(".Nav1").addClass("hidden");

  $(".Nav2").addClass("nav-visible");

} else {

  $(".Nav1").removeClass("hidden");

  $(".Nav2").removeClass("nav-visible");

}

$(document).ready(function() {

  $(document).scroll(function() {

    if ($(this).scrollTop() > 20) {

      $(".Nav1").addClass("hidden");

      $(".Nav2").addClass("nav-visible");

    } else {

      $(".Nav1").removeClass("hidden");

      $(".Nav2").removeClass("nav-visible");

    }

  })

})

.Z-index {

  z-index: 999999 !important;

}

.nav-initial {

  position: fixed !important;

  right: 0;

  left: 0;

  top: -20px;

  opacity: 0;

  transition: 0.2s;

}

.nav-visible {

  top: 0;

  opacity: 1;

}

.body {

  height: 1000px;

}

.hidden {

  opacity: 0;

}

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 575px) {

  .SearchBox {

    width: 100%;

  }

  .mycard {

    width: 180px;

  }

  .Dotted:before {

    height: 75px;

  }

  .tagFilters {

    height: 3rem;

    width: 6rem;

    font-size: 9pt;

  }

  .wordFilter {

    font-size: 9pt;

  }

  .HotelBckImg {

    height: 230px;

    border-top-left-radius: 15px;

    border-bottom-right-radius: 0;

    margin-bottom: 5px;

  }

  .sm-Padding {

    max-width: 95% !important;

    margin-right: auto;

    margin-left: auto;

  }

  .customButton2 {

    height: 2.8rem;

  }

}

@media only screen and (max-width: 425px) {

  .Dotted:before {

    height: 95px;

  }

}

@media only screen and (max-width: 350px) {

  .Dotted:before {

    height: 125px;

  }

}

/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 576px) {

  .SearchBox {

    width: 320px;

  }

  .mycard {

    width: 190px;

  }

  .Dotted:before {

    height: 70px;

  }

  .tagFilters {

    height: 3rem;

    width: 6rem;

    font-size: 9pt;

  }

  .wordFilter {

    font-size: 10pt;

  }

}

/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {

  .SearchBox {

    width: 330px;

  }

  .mycard {

    width: 190px;

  }

  .sideImgLeft {

    width: 30%;

    height: 350px;

    margin-top: 3.5%;

  }

  .sideImgRight {

    width: 30%;

    height: 350px;

    margin-top: 3.5%;

  }

  .Dotted:before {

    height: 90px;

  }

  .tagFilters {

    height: 3rem;

    width: 6rem;

    font-size: 9pt;

  }

  .wordFilter {

    font-size: 9pt;

  }

}

/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {

  .SearchBox {

    width: 400px;

  }

  .mycard {

    width: 190px;

  }

  .sideImgLeft {

    width: 30%;

    height: 370px;

    margin-top: 2%;

  }

  .sideImgRight {

    width: 30%;

    height: 370px;

    margin-top: 2%;

  }

  .tagFilters {

    height: 3rem;

    width: 6rem;

  }

  .wordFilter {

    font-size: 10pt;

  }

}

/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {

  .SearchBox {

    width: 370px;

  }

  .mycard {

    width: 190px;

  }

  .sideImgLeft {

    width: 30%;

    height: 285px;

  }

  .sideImgRight {

    width: 30%;

    height: 285px;

  }

  .Dotted:before {

    height: 70px;

  }

  .tagFilters {

    height: 3.3rem;

    width: 8rem;

  }

  .wordFilter {

    font-size: 11pt;

  }

}

.body {

  height: 1000px;

}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--Navbar-->

<div class="container-fluid shadow-sm bg-white">

  <div class="container p-0">

    <!--First Nav-->

    <div class="Nav1 Z-index d-none d-sm-block">

      <nav class="navbar navbar-expand-sm navbar-light p-0 py-1">

        Nav 1

      </nav>

    </div>

    <!--Second Navbar-->

    <div class="Nav2 container-fluid nav-initial Z-index bg-white">

      <div class="container p-0">

        <nav class="navbar p-0 m-0 navbar-expand-sm bg-white navbar-light">

          Nav 2

        </nav>

      </div>

    </div>

  </div>

</div>

<div class="body">

  Body

</div>