1

我有一个浮动导航栏，它给我带来了一些小问题......它在大多数情况下都能完美运行......但有一个小例外。看一下代码：

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

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

当用户回到顶部时，导航栏打开（它应该如何）。如果我将鼠标悬停在栏上，它不会做任何事情，但是当我的鼠标离开时，它会缩小。当它位于页面顶部时，我不希望这种情况发生。有没有比查看“#brand_logo”是否在视口中更好的检查方法？

4

1 回答 1

1

在 mouseleave 事件函数中检查滚动条向下的距离： 

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

将 500 更改为最合适的值。

于 2012-09-16T21:18:22.347 回答