創建一個下拉菜單，該菜單在頁面頂部向上打開，向下滾動時向下滾動

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