CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
working ant
working ant

Reputation: 85

Transparent navbar to visible when scrolling

I saw an transparent theme navbar that have really nice effect when scrolling down.

Here is what happends when scrolling down.

  1. It goes from 0 opacity to 100
  2. Navbar fixed containers height becomes less.
  3. Color:#fff; becomes color:000;

Here is direct link to demo page of that theme

Guessing it is javascript/jquery that is used there and i know only HTML & CSS. Could anyone help me make it similar like in that theme?

Upvotes: 3

Views: 13998

Answers (1)

NullPointer
NullPointer

Reputation: 442

Ok, I'm gonna throw you a bone here JSFiddle:

$(document).on('scroll', function (e) {
    $('.navbar').css('opacity', ($(document).scrollTop() / 500));
});

Magic number alert: 500 is the divider for the scrollTop, the lower the number the faster the opacity goes above 1 (opacity should be between 0 and 1.

So what this code does is listen to scrolling on the document and set the opacity of the navbar according to the scroll position.

Hope this helps!

Upvotes: 6

Related Questions