CODEWITHSUNDEEP
htmlcssbootstrap-4
Taqasar Walayat
Taqasar Walayat

Reputation: 45

Search bar appear on the navbar when i scroll down Bootstrap 4

How I can create a searchbar inside the navbar that initially is not visible and when I scroll down it appears (if it possible I would like to decide the time when it appears after the scrolling)

Upvotes: 1

Views: 1018

Answers (1)

Chase Douglas
Chase Douglas

Reputation: 124

If you create the bootstrap navigation with the searchbar in it then give the searchbar a class name (I chose .searchbar in my example), then add this javscript and 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;
}

This will make the searchbar not visible initially then after scrolling down (500px) it will add the class .visible which makes the searchbar visible. Then if you scroll back up past 500px from the top it will remove the .visible class and the searchbar will be invisible again.

Upvotes: 1

Related Questions