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

Posted 2023-05-08

【中文标题】当用户到达页面底部时关闭弹出菜单

【英文标题】：Close the pop-up menu when user reach the bottom of the page

【发布时间】：2021-02-25 10:54:27

【问题描述】：

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

我需要的是：

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

我恳请在我的 js 代码中添加一个 sn-p 代码

$(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

很好的解决方案？

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

【参考方案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");
            );
        
    );

);

【讨论】：

菜单关闭时是否还有淡出菜单的方法？

您可以尝试使用 FadeOut 的“版本 2”

打开@54ka时如何淡入？很抱歉打扰您的技能；）

我试过了，但要做到这一点，您必须在代码中更改太多内容。最好不要这样做:)

【参考方案2】：

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

更新 （评论中的网址我这里无法添加）。

【讨论】：

嘿嘿，这已经是我的密码笔了！你发给我的链接和我发的一样

查看这个codepen.io/youba/pen/ZEOwYyR（我无法添加网址）

感谢 Youba，但当我到达页面底部时没有关闭或提醒任何内容

它对我有用！！检查您是否在正确的网址而不是旧网址中

【参考方案3】：

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

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

Codepen

【参考方案4】：

这应该可行：

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