Javascript 更改滚动条上的导航栏

当“从顶部滚动”大于20时，我想更改导航栏。 我的代码可以工作，但当缓慢向上滚动时，跳转无限。 我怎样才能修好它

工作

这是我的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>

---

这是因为当您将

Nav1

display设置为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");
}

$（文档）.ready（函数（）{
$（文档）。滚动（函数（）{
如果（$（this）.scrollTop（）>20）{
$（“.Nav1”）.addClass（“隐藏”）；
$（“.Nav2”）.addClass（“nav可见”）；
}否则{
$（.Nav1”）.removeClass（“隐藏”）；
$（.Nav2”）.removeClass（“nav可见”）；
}
})
})

.Z-index{
z指数：999999！重要；
}
.导航首字母{
位置：固定！重要；
右：0；
左：0；
顶部：-20px；
不透明度：0；
过渡：0.2s；
}
.导航可见{
排名：0；
不透明度：1；
}
.身体{
高度：1000px；
}
.隐藏{
不透明度：0；
}
/*超小型设备（手机，600px及以下）*/
@仅介质屏幕和（最大宽度：575px）{
.搜索框{
宽度：100%；
}
.我的卡{
宽度：180px；
}
.点：之前{
高度：75px；
}
.标记过滤器{
高度：3雷姆；
宽度：6雷姆；
字号：9pt；
}
.wordFilter{
字号：9pt；
}
霍特尔布基姆先生{
高度：230像素；
边框左上半径：15px；
边框右下半径：0；
边缘底部：5px；
}
.sm填充{
最大宽度：95%！重要；
右边距：自动；
左边距：自动；
}
.customButton2{
高度：2.8雷姆；
}
}
@仅介质屏幕和（最大宽度：425px）{
.点：之前{
高度：95px；
}
}
@仅介质屏幕和（最大宽度：350px）{
.点：之前{
高度：125px；
}
}
/*小型设备（肖像平板电脑和大型手机，600px及以上）*/
@仅介质屏幕和（最小宽度：576px）{
.搜索框{
宽度：320px；
}
.我的卡{
宽度：190px；
}
.点：之前{
高度：70像素；
}
.标记过滤器{
高度：3雷姆；
宽度：6雷姆；
字号：9pt；
}
.wordFilter{
字号：10pt；
}
}
/*中型设备（横向平板电脑、768px及以上）*/
@仅介质屏幕和（最小宽度：768px）{
.搜索框{
宽度：330px；
}
.我的卡{
宽度：190px；
}
sideImgLeft先生{
宽度：30%；
高度：350px；
利润率最高：3.5%；
}
sideImgRight先生{
宽度：30%；
高度：350px；
利润率最高：3.5%；
}
.点：之前{
高度：90px；
}
.标记过滤器{
高度：3雷姆；
宽度：6雷姆；
字号：9pt；
}
.wordFilter{
字号：9pt；
}
}
/*大型设备（笔记本电脑/台式机、992px及以上）*/
@仅介质屏幕和（最小宽度：992px）{
.搜索框{
宽度：400px；
}
.我的卡{
宽度：190px；
}
sideImgLeft先生{
宽度：30%；
高度：370px；
利润率最高：2%；
}
sideImgRight先生{
宽度：30%；
高度：370px；
利润率最高：2%；
}
.标记过滤器{
高度：3雷姆；
宽度：6雷姆；
}
.wordFilter{
字号：10pt；
}
}
/*超大设备（大型笔记本电脑和台式电脑，1200像素及以上）*/
@仅介质屏幕和（最小宽度：1200px）{
.搜索框{
宽度：370px；
}
.我的卡{
宽度：190px；
}
sideImgLeft先生{
宽度：30%；
高度：285px；
}
sideImgRight先生{
宽度：30%；
高度：285px；
}
.点：之前{
高度：70像素；
}
.标记过滤器{
身高：3.3雷姆；
宽度：8雷姆；
}
.wordFilter{
字号：11pt；
}
}
.身体{
高度：1000px；
}

导航1
导航2
身体

它是完美的，tnx。

if ($(this).scrollTop() > 20) {
  $(".Nav1").addClass("hidden");
  $(".Nav2").addClass("nav-visible");
} else {
  $(".Nav1").removeClass("hidden");
  $(".Nav2").removeClass("nav-visible");
}