javascript - 当用户到达页面底部时关闭弹出菜单

Question

我有一个简单的菜单，点击即可打开。

我需要的是:

1. 点击左上角打开菜单/汉堡
2. 用户阅读了所有文本并且 向下滚动 3.3 第 3 步 - 当用户到达页面末尾时关闭/隐藏弹出菜单

我恳请您在我的 js 代码中添加一段代码

$(document).ready(function() {
    $(".toggle-nav").click(function(e) {
        e.stopPropagation();
        e.preventDefault();
        $(this).toggleClass("active");
        $(".menu ul").toggleClass("active");
    });
    $(document).click(function(e){
      if(!e.target.closest("ul") && $(".menu a").hasClass("active")){
         $(".menu ul").toggleClass("active");
         $(".toggle-nav").toggleClass("active");
      }
    })
    
});

Here是我的codepen来测试该功能

很好的解决方案吗？

附:显然，每次用户切换汉堡按钮时，该操作都需要起作用

Answer 1

用这个替换你的 jQuery

$(document).ready(function () {

    $(".toggle-nav").click(function (e) {
        e.stopPropagation();
        e.preventDefault();
        $(this).toggleClass("active");
        $(".menu ul").toggleClass("active");
    });

    $(document).click(function (e) {
        if (!e.target.closest("ul") && $(".menu a").hasClass("active")) {
            $(".menu ul").toggleClass("active");
            $(".toggle-nav").toggleClass("active");
        }
    });


    $(window).scroll(function () {
        var scrollPos = $(document).scrollTop();
        var hgt = $('.menu').height();
        var win = $(window).height();

        if (hgt - win === scrollPos) {
            $(".menu ul").toggleClass("active");
            $(".toggle-nav").toggleClass("active");
        }
    });

});

---

版本 2:带淡出

要使此选项起作用，您需要将 id="fadeout" 添加到 ul 元素。

$(document).ready(function () {

    $(".toggle-nav").click(function (e) {
        e.stopPropagation();
        e.preventDefault();
        $(this).toggleClass("active");
        $(".menu ul").toggleClass("active");
    });

    $(document).click(function (e) {
        if (!e.target.closest("ul") && $(".menu a").hasClass("active")) {
            $(".menu ul").toggleClass("active");
            $(".toggle-nav").toggleClass("active");
        }
    });


    $(window).scroll(function () {
        var scrollPos = $(document).scrollTop();
        var hgt = $('.menu').height();
        var win = $(window).height();

        if (hgt - win === scrollPos) {
            $('#fadeout').fadeOut("slow", function () {
                $(".menu ul").toggleClass("active");
                $(".toggle-nav").toggleClass("active");
                $('#fadeout').removeAttr("style");
            });
        }
    });

});