滚动时更改导航栏

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 display 设置为 none 时，它会从 DOM 中删除，并且scrollTop值会发生变化。 相反，您可以使用不透明度隐藏它：

.hidden {
  opacity: 0;
}

并添加/删除此 class：

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>