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

Question

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

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

.show {display:block;
        bottom: 100%;
}
.show2 {display:block;

}

这是 JQuery 脚本。 如您所见，当它位于页面的最顶部时，我试图让它与“显示”切换，我希望它在用户从顶部向下滚动 1 或 2 时更改为“show2” 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');
            }
        }
    }
}

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

Answer 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");
    }
}