视口上的不透明菜单

Question

我正在尝试做一件事。当我页面顶部的某些内容离开视口时，我想将#topnav不透明度更改为0.6。我在这里找到了一些链接，包括：

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

我尝试修改自己，但似乎没有用。以下是我努力使其发挥作用的原因。

        <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>​

你可以帮帮我吗？

当我向下滚动时，菜单不会变得不透明。它也没有登录到控制台。

Answer 1

您需要包含inview插件，默认情况下它不是jQuery的一部分：

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