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

Question

I'm trying to create a drop-down menu that opens upward only when the window is at the very top and then open downwards when its not. I'm trying to achieve this with an IF-Statement but cannot get it to display downwards.'show' will display the menu upwards and 'show2'will display it downwards.

This is the CSS for the "show" and "show2".

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

}

This is the JQuery script. As you can see, I'm trying to have it toggle with 'show' when its at the very top of the page and I'd like it to change to 'show2' when the user scroll down from the top by 1 or 2 px's. aka straight away.

When the user clicks on the dropdown button,toggle between hiding and showing the dropdown content.

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

Close the dropdown if the user clicks outside of it

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

Any help is welcome and thank you in advance!

Answer 1

According to this question, you can conditionally declare functions as follows.

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