Question

I am trying to do just one things. When something at the top of my page goes out of viewport, I want to change the #topnav opacity to 0.6. I found a few links on here including:

https://stackoverflow.com/questions/10402232/jquery-animated-show-hide-of-menu-when-another-div-is-visible-invisible-in-the-v

That I tried to modify myself, but it doesn’t seem to work. Here is what I made it into to try to make it work.

        <script>

        $('#brand_logo').bind('inview', function(event, visible) {
            if (visible == true) {
                // element is now visible in the viewport
                console.log("visible");
                $("#topnav").css({
                    opacity: '1.0'
                });
                // $(".head-wrap-left").hide();
            } else {
                // element has gone out of viewport
                console.log("invisible");
                $("#topnav").css({
                    opacity: '0.6'
                });
                // $(".head-wrap-left").show();
            }
        }); 

        </script>​

Could you help me out?

When I scroll down, the menu does not go opaque. It is not logged to the console either.

Answer 1

You need to include the inview plugin, it is not part of jQuery by default:

https://github.com/protonet/jquery.inview