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

Show and hide navbar using javascript for scroll and hover functions

本文关键字：滚动 悬停 功能 导航 JavaScript 显示 隐藏 使用      更新时间：2023-09-26

我正在创建一个带有Twitter引导程序的网站，并且对于我正在使用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();
    });
});

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

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

谢谢

易卜拉欣

为什么不直接使用类和CSS来切换呢？看看这个小提琴：

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

您可以使用标志在滚动和悬停回调之间共享状态，如下所示：

(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中添加所有内容即可。

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

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