html - 当我向下滚动Bootstrap 4时，搜索栏出现在导航栏上

我如何在导航栏内创建最初不可见的搜索栏，并在向下滚动时显示（如果可能的话，我想确定滚动后在何时显示）

最佳答案

如果您在其中使用搜索栏创建引导导航，则为搜索栏指定一个类名（在示例中选择了.searchbar），然后添加此javscript和CSS。

<script>
  $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 500) {
            $(".searchbar").addClass("visible");
        } else {
            $(".searchbar").removeClass("visible");
        }
    });

</script>

.searchbar {
opacity: 0;
}
.visible {
opacity: 1;
}

这将使搜索栏最初不可见，然后向下滚动（500px）后，将添加.visible类，使搜索栏可见。然后，如果您从顶部向上滚动超过500px，它将删除.visible类，并且搜索栏将再次不可见。

关于html - 当我向下滚动Bootstrap 4时，搜索栏出现在导航栏上，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50778071/