javascript - 更改滚动条上的导航栏

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

发生这种情况是因为当您将 Nav1 显示设置为无时，它会从 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>