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

Answer 2

你可以使用一个标志来共享滚动和悬停回调之间的状态，如下所示：

(function ($) {
var isNavBarShown = false;

    $(document).ready(function () {

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

        // fade in .navbar
            $(window).scroll(function () {
                // set distance user needs to scroll before we fadeIn navbar
                if ($(this).scrollTop() > 100) {
                    $('.navbar').fadeIn();
                    isNavBarShown = true;

                } else {
                $('.navbar').fadeOut();
                isNavBarShown = false;
            }
        });

        /* Show navbar */


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

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

        $('.navbar').hover(function () {
            if (isNavBarShown) { return; }
            $('.navbar').show();
        }, function () {
            if (isNavBarShown) { return; }
            $('.navbar').fadeOut();
        });
    });
}(jQuery));

请注意，我在匿名函数(function($) {...})(jQuery)中包含了所有内容以共享范围。

$(function () {...})与$(document).ready()相同，因此您不需要这些，只需在第一个document.ready内添加所有内容。

此外，在滚动期间更改样式可能会严重损害页面的性能。最好定期检查页面是否已滚动，然后执行代码而不是直接将其附加到滚动回调。

Answer 3

$(document).ready(function() {
  $(window).scroll(function() {
    var x = $(window).scrollTop();
    if (x >= 500) {
      $("#navbar").show(200);
    } else {
      $("#navbar").hide(200);
    }
  });
});

使用javascript显示和隐藏导航栏以进行滚动和悬停功能

3 个答案: