javascript - 使用 javascript 显示和隐藏导航栏以实现滚动和悬停功能

Question

我正在使用 Twitter Bootstrap 创建一个网站，并且我正在使用 javascript 来实现某些功能。

我创建了一个导航栏，当它位于页面顶部时会隐藏，当向下滚动到某个点时会显示。然后我创建了一个函数，当用户位于页面顶部时，他们可以将鼠标悬停在透明的 div 上，然后取消隐藏导航栏。

这是我的脚本:

//Navbar Hide On Scroll

(function ($) {
    $(document).ready(function () {

        // hide .navbar first
        $(".navbar").hide();

        // fade in .navbar
        $(function () {
            $(window).scroll(function () {
                // set distance user needs to scroll before we fadeIn navbar
                if ($(this).scrollTop() > 100) {
                    $('.navbar').fadeIn();
                } else {
                    $('.navbar').fadeOut();
                }
            });
        });
    });
}(jQuery));

/* Show navbar */

$(function () {
    $('#shownav').hover(function () {
        $('.navbar').fadeIn();
    });
});

/* when navbar is hovered over it will override previous */

$(function () {
    $('.navbar').hover(function () {
        $('.navbar').show();
    }, function () {
        $('.navbar').fadeOut();
    });
});

我遇到的问题是我只希望悬停功能在页面顶部时处于事件状态但是当滚动功能被激活时我希望它在使用滚动功能显示导航栏时停止当用户悬停在导航栏上和离开导航栏时消失。

当页面滚动到某个点时，有人可以帮助我正确放置脚本以停止悬停功能吗？

谢谢

易卜拉欣

Answer 1

为什么不直接使用类和 CSS 来切换呢？检查这个fiddle出:

//Navbar Hide On Scroll

(function ($) {
    $(document).ready(function () {

        // hide .navbar first
        $(".navbar").addClass('hideme');

        // fade in .navbar
        $(function () {
            $(window).scroll(function () {
                // set distance user needs to scroll before we fadeIn navbar
                if ($(this).scrollTop() > 100) {
                    $('.navbar').removeClass('hideme');
                } else {
                    $('.navbar').addClass('hideme');
                }
            });
        });
    });
}(jQuery));

/* Show navbar */

$(function () {
    $('#shownav').hover(function () {
        $('.navbar').removeClass('hideme');
    });
});

/* when navbar is hovered over it will override previous */

$(function () {
    $('.navbar').hover(function () {
        $('.navbar').removeClass('hideme');
    }, function () {
        $('.navbar').addClass('hideme');
    });
});

CSS

#shownav {
    height: 20px;
}
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    opacity: 1;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}
.navbar.hideme {
    opacity: 0;
}