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

Question

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

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

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

}

这是JQuery脚本。 如您所见，我试图在页面顶部将其切换为“ show”，并希望当用户从顶部向下滚动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

根据此问题，您可以有条件地声明函数，如下所示。

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