Rayan Sp Rayan Sp - 2 months ago 6
jQuery Question

How to make Static navbar fadeIn on scroll - bootstrap

I am trying to make the navbar fadeIn and become fixed when user scrolls down. I could only make it sticky, and that's not what I am looking for. How could I make it fade in from the top of the page on scroll?

This is what I made so far

$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 110) {
$('.navbar-light').addClass("fixed");
} else {
$('.navbar-light').removeClass("fixed");
}
});
});


https://jsfiddle.net/moerayan/DTcHh/25773/

Basically, what I am trying to do, on scroll, the navbar should fade in and not stick!

Answer

What you are doing in your fiddle is just make the nav-bar sticky.

Because I can not guess how your html is looking like. And if you are using some plugin I just can say this:

You can not do this with just little jquery

The site you are pointing to is using this plugin to achieve the effect.

https://github.com/markgoodyear/headhesive.js/

And of course the related html in order to make it work.

This plug in has also its demo site where you can se the examples and make this to work as you want.

https://markgoodyear.com/labs/headhesive/

I hope this will help you out. :)

Comments