Панель поиска появляется на панели навигации, когда я прокручиваю 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;
}

Это сделает панель поиска изначально невидимой, затем после прокрутки вниз (500 пикселей) добавит класс .visible, который сделает панель поиска видимой.Затем, если вы прокрутите вверх на 500 пикселей сверху, он удалит класс .visible, и панель поиска снова станет невидимой.