jquery - 视口上的不透明菜单

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