1

I have a floating nav bar that is giving me small problems... It works perfectly for the most part.. but with a small exception. Take a look at the code:

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

When I scroll down the page, it shrinks the nav bar to 310px, the height, etc. If the user is halfway down the page and they hover over the shrunk part of the nav bar, it opens up and displays the full nav bar. When their mouse leaves, it will shrink back down (assuming they are still in the middle of the page.)

When the user goes back to the top, the nav bar opens up (how it's supposed to). If I hover over the bar, it won't do anything, but when my mouse leaves it will shrink back down. I do not want this happening when it's at the top of the page. Is there a better check to use than to see if "#brand_logo" is in the viewport?

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 に答える