更改滚动条上的导航栏

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 {&nbsp; opacity: 0;}并添加/删除此类：if ($(this).scrollTop() > 20) {&nbsp; $(".Nav1").addClass("hidden");&nbsp; $(".Nav2").addClass("nav-visible");} else {&nbsp; $(".Nav1").removeClass("hidden");&nbsp; $(".Nav2").removeClass("nav-visible");}$(document).ready(function() {&nbsp; $(document).scroll(function() {&nbsp; &nbsp; if ($(this).scrollTop() > 20) {&nbsp; &nbsp; &nbsp; $(".Nav1").addClass("hidden");&nbsp; &nbsp; &nbsp; $(".Nav2").addClass("nav-visible");&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; $(".Nav1").removeClass("hidden");&nbsp; &nbsp; &nbsp; $(".Nav2").removeClass("nav-visible");&nbsp; &nbsp; }&nbsp; })}).Z-index {&nbsp; z-index: 999999 !important;}.nav-initial {&nbsp; position: fixed !important;&nbsp; right: 0;&nbsp; left: 0;&nbsp; top: -20px;&nbsp; opacity: 0;&nbsp; transition: 0.2s;}.nav-visible {&nbsp; top: 0;&nbsp; opacity: 1;}.body {&nbsp; height: 1000px;}.hidden {&nbsp; opacity: 0;}/* Extra small devices (phones, 600px and down) */@media only screen and (max-width: 575px) {&nbsp; .SearchBox {&nbsp; &nbsp; width: 100%;&nbsp; }&nbsp; .mycard {&nbsp; &nbsp; width: 180px;&nbsp; }&nbsp; .Dotted:before {&nbsp; &nbsp; height: 75px;&nbsp; }&nbsp; .tagFilters {&nbsp; &nbsp; height: 3rem;&nbsp; &nbsp; width: 6rem;&nbsp; &nbsp; font-size: 9pt;&nbsp; }&nbsp; .wordFilter {&nbsp; &nbsp; font-size: 9pt;&nbsp; }&nbsp; .HotelBckImg {&nbsp; &nbsp; height: 230px;&nbsp; &nbsp; border-top-left-radius: 15px;&nbsp; &nbsp; border-bottom-right-radius: 0;&nbsp; &nbsp; margin-bottom: 5px;&nbsp; }&nbsp; .sm-Padding {&nbsp; &nbsp; max-width: 95% !important;&nbsp; &nbsp; margin-right: auto;&nbsp; &nbsp; margin-left: auto;&nbsp; }&nbsp; .customButton2 {&nbsp; &nbsp; height: 2.8rem;&nbsp; }}@media only screen and (max-width: 425px) {&nbsp; .Dotted:before {&nbsp; &nbsp; height: 95px;&nbsp; }}@media only screen and (max-width: 350px) {&nbsp; .Dotted:before {&nbsp; &nbsp; height: 125px;&nbsp; }}/* Small devices (portrait tablets and large phones, 600px and up) */@media only screen and (min-width: 576px) {&nbsp; .SearchBox {&nbsp; &nbsp; width: 320px;&nbsp; }&nbsp; .mycard {&nbsp; &nbsp; width: 190px;&nbsp; }&nbsp; .Dotted:before {&nbsp; &nbsp; height: 70px;&nbsp; }&nbsp; .tagFilters {&nbsp; &nbsp; height: 3rem;&nbsp; &nbsp; width: 6rem;&nbsp; &nbsp; font-size: 9pt;&nbsp; }&nbsp; .wordFilter {&nbsp; &nbsp; font-size: 10pt;&nbsp; }}/* Medium devices (landscape tablets, 768px and up) */@media only screen and (min-width: 768px) {&nbsp; .SearchBox {&nbsp; &nbsp; width: 330px;&nbsp; }&nbsp; .mycard {&nbsp; &nbsp; width: 190px;&nbsp; }&nbsp; .sideImgLeft {&nbsp; &nbsp; width: 30%;&nbsp; &nbsp; height: 350px;&nbsp; &nbsp; margin-top: 3.5%;&nbsp; }&nbsp; .sideImgRight {&nbsp; &nbsp; width: 30%;&nbsp; &nbsp; height: 350px;&nbsp; &nbsp; margin-top: 3.5%;&nbsp; }&nbsp; .Dotted:before {&nbsp; &nbsp; height: 90px;&nbsp; }&nbsp; .tagFilters {&nbsp; &nbsp; height: 3rem;&nbsp; &nbsp; width: 6rem;&nbsp; &nbsp; font-size: 9pt;&nbsp; }&nbsp; .wordFilter {&nbsp; &nbsp; font-size: 9pt;&nbsp; }}/* Large devices (laptops/desktops, 992px and up) */@media only screen and (min-width: 992px) {&nbsp; .SearchBox {&nbsp; &nbsp; width: 400px;&nbsp; }&nbsp; .mycard {&nbsp; &nbsp; width: 190px;&nbsp; }&nbsp; .sideImgLeft {&nbsp; &nbsp; width: 30%;&nbsp; &nbsp; height: 370px;&nbsp; &nbsp; margin-top: 2%;&nbsp; }&nbsp; .sideImgRight {&nbsp; &nbsp; width: 30%;&nbsp; &nbsp; height: 370px;&nbsp; &nbsp; margin-top: 2%;&nbsp; }&nbsp; .tagFilters {&nbsp; &nbsp; height: 3rem;&nbsp; &nbsp; width: 6rem;&nbsp; }&nbsp; .wordFilter {&nbsp; &nbsp; font-size: 10pt;&nbsp; }}/* Extra large devices (large laptops and desktops, 1200px and up) */@media only screen and (min-width: 1200px) {&nbsp; .SearchBox {&nbsp; &nbsp; width: 370px;&nbsp; }&nbsp; .mycard {&nbsp; &nbsp; width: 190px;&nbsp; }&nbsp; .sideImgLeft {&nbsp; &nbsp; width: 30%;&nbsp; &nbsp; height: 285px;&nbsp; }&nbsp; .sideImgRight {&nbsp; &nbsp; width: 30%;&nbsp; &nbsp; height: 285px;&nbsp; }&nbsp; .Dotted:before {&nbsp; &nbsp; height: 70px;&nbsp; }&nbsp; .tagFilters {&nbsp; &nbsp; height: 3.3rem;&nbsp; &nbsp; width: 8rem;&nbsp; }&nbsp; .wordFilter {&nbsp; &nbsp; font-size: 11pt;&nbsp; }}.body {&nbsp; 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">&nbsp; <div class="container p-0">&nbsp; &nbsp; <!--First Nav-->&nbsp; &nbsp; <div class="Nav1 Z-index d-none d-sm-block">&nbsp; &nbsp; &nbsp; <nav class="navbar navbar-expand-sm navbar-light p-0 py-1">&nbsp; &nbsp; &nbsp; &nbsp; Nav 1&nbsp; &nbsp; &nbsp; </nav>&nbsp; &nbsp; </div>&nbsp; &nbsp; <!--Second Navbar-->&nbsp; &nbsp; <div class="Nav2 container-fluid nav-initial Z-index bg-white">&nbsp; &nbsp; &nbsp; <div class="container p-0">&nbsp; &nbsp; &nbsp; &nbsp; <nav class="navbar p-0 m-0 navbar-expand-sm bg-white navbar-light">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Nav 2&nbsp; &nbsp; &nbsp; &nbsp; </nav>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div><div class="body">&nbsp; Body</div>