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

Question

如何在导航栏中创建一个最初不可见的搜索栏，当我向下滚动它时（如果有可能我想决定滚动后它出现的时间）

Answer 1

如果你用其中的搜索栏创建引导程导航，那么给搜索栏一个类名（我在我的例子中选择了.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类，搜索栏将再次不可见。