jQuery Waypoints Navbar In Bootstrap

Question

I'm creating a website with Bootstrap, and I'm trying to make the navbar change transparency when it is past the header and reaches the main content, but I just can't seem to get it to do anything.

There aren't many tutorials on Waypoints for some reason so I'm not even sure I'm using it right in the first place.

For the main content I've created a Div with a class "test"

Here's the JS:

var $navbar = $('test');

$navbar.waypoint(function () {
    $navbar.addClass('.js-navbar-animate');
});

CSS I'm using is quite simply:

.navbar{
    opacity: 0.5;
}

.js-navbar-animate{
    opacity: 1;
}

Answer 1

First, is that normal that for looking for your .test element you wrote:

var $navbar = $('test');

Instead of:

var $navbar = $('.test');

?

Also, I bet you're looking for that functionality from Waypoint .