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

Question

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

我需要的是：

点击左上角打开menu/hamburger
用户阅读了所有文本并向下滚动第 3.3 步 - close/hide 用户到达页面末尾时的弹出菜单

我恳请在我的 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

很好的解决方案？

p.s。显然，每次用户切换汉堡包按钮时都需要执行此操作

Answer 1

我发现这段代码可能对您有所帮助（它几乎适用于所有浏览器），它只留下关闭弹出窗口的代码

更新
（评论里的URL我这里加不进去）

Answer 2

这应该有效：

var menu = document.getElementById("Menu");
window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= menu.offsetHeight) {
      if($(".menu a").hasClass("active")){
         $(".menu ul").toggleClass("active");
         $(".toggle-nav").toggleClass("active");
      }
    }
};

然后在您的 <ul> 标签上，为其指定 ID Menu

Answer 3

您可以使用 jQuery scroll 来检测滚动条是否到达底部并在为真时添加切换，如下所示：

$(window).scroll(function () {
  if ($(window).scrollTop() + $(window).height() == $(document).height()) {
    if ($(".menu a").hasClass("active")) {
      $(".menu ul").toggleClass("active");
      $(".toggle-nav").toggleClass("active");
    }
  }
});

Codepen

Answer 4

用这个

替换你的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： 带有 FadeOut

要使此选项生效，您需要将 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");
            });
        }
    });

});

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

Close the pop-up menu when user reach the bottom of the page

html

javascript

css

jquery

menu