创建一个下拉菜单，在页面顶部向上打开，向下滚动时向下打开

Posted 2023-05-09

【中文标题】创建一个下拉菜单，在页面顶部向上打开，向下滚动时向下打开

【英文标题】：Creating a drop-down menu that opens upward at the top of the page and then downward when scrolled down

【发布时间】：2017-02-28 01:43:26

【问题描述】：

我正在尝试创建一个下拉菜单，该菜单仅在窗口位于最顶部时向上打开，然后在窗口不在顶部时向下打开。我正在尝试使用 IF 语句来实现这一点，但无法让它向下显示。'show' 将向上显示菜单，'show2' 将向下显示。

这是“show”和“show2”的 CSS。

.show display:block;
        bottom: 100%;

.show2 display:block;

这是 JQuery 脚本。 如您所见，我试图让它在页面顶部时与“显示”切换，并且当用户从顶部向下滚动 1 或 2 时，我希望它更改为“显示 2” px的。也就是马上。

当用户点击下拉按钮时，在隐藏和显示下拉内容之间切换。

if (window.top == window.self) 
    function myFunction() 
        document.getElementById("myDropdown").classList.toggle("show");
    
 else 
    function myFunction2() 
        document.getElementById("myDropdown").classList.toggle("show2");
    

如果用户在下拉菜单之外点击，请关闭它

window.onclick = function (event) 
    if (!event.target.matches('.dropbtn')) 

        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i--) 
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) 
                openDropdown.classList.remove('show');
             else(openDropdown.classList.contains('show2')) 
                openDropdown.classList.remove('show2');
            
        
    

欢迎任何帮助，并在此先感谢您！

【问题讨论】：

您谈论的是 jQuery 脚本，但您没有在代码中的任何地方使用 jQuery。您不应在 if 块内定义函数。定义函数并执行函数内部的逻辑。此外，还不清楚代码应该如何工作。请阅读如何创建minimal reproducible example。

我想你可能对window.top == window.self 的作用感到困惑。如果您正在检查滚动位置，我认为您应该使用类似document.body.scrollTop == 0

【参考方案1】：

根据this的问题，可以有条件地声明函数如下。

var myFunction;
if (window.top == window.self) 
    myFunction = function () 
        document.getElementById("myDropdown").classList.toggle("show");
    ;
 else 
    myFunction = function () 
        document.getElementById("myDropdown").classList.toggle("show2");
    

【讨论】：

这个功能会因浏览器而异吗？它在 chrome 上运行良好，但在 IE 上它只是向上显示，当我点击屏幕上的任何位置时它不会消失。

我的回复只演示了如何有条件地定义函数。进一步阅读后，scrollY 似乎更适合用于有条件地分配函数。 window.top 与框架有关，而不是 scoll 位置