JQuery Inview动画

Question

我有一个浮动的导航栏，它给我一些小问题......它在大多数情况下都很完美..但是有一个小例外。看看代码：

<script type="text/javascript">
    $('#brand_logo').on('inview mouseenter', function(event, visible) {
        if (visible == true) {
            // console.log("I got my eye on it Charlie");
            $("#topnav").animate({
                opacity: 1.0,
                width: '98%',
                height: '38px'
            });
            // $(".head-wrap-left").hide();
        } else {
            // console.log("Let's set the mood.");

            $("#topnav").animate({
                opacity: 0.9, //0.6 original
                  width: '310px',
                  height: '33px',

            });
            $("#topnav_behind").slideUp();

            $('#topnav').bind({
                        mouseenter: function() {
                            $("#topnav").animate({opacity: 1.0, width: '98%', height: '38px'})
                        },
                        mouseleave: function() {
                            $("#topnav").animate({opacity: 0.9, width: '310px', height: '33px'})
                        }
                        });
            };

            // $(".head-wrap-left").show();

    });
</script>

当我向下滚动页面时，它会将导航栏缩小到310px，高度等。如果用户位于页面的中间位置并将鼠标悬停在导航栏的缩小部分上，则会打开并显示完整导航栏。当他们的鼠标离开时，它会缩小（假设它们仍在页面中间。）

当用户返回顶部时，导航栏会打开（它应该如何）。如果我将鼠标悬停在条形图上，它将不会执行任何操作，但是当我的鼠标离开时它会缩小。当它位于页面顶部时，我不希望发生这种情况。是否有更好的检查使用，而不是查看“#brand_logo”是否在视口中？

Answer 1

检查mouseleave事件函数中滚动的距离：

mouseleave: function() {
            if($(window).scrollTop() > 500 {
                   $("#topnav").animate({opacity: 0.9, width: '310px', height: '33px'})
             }
    }

将500更改为最合适的值。