0

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!

Dan Beaulieu
  • 330
  • 1
  • 11
Emmet
  • 1
  • You talk about a jQuery script, but you're not using jQuery anywhere in the code you have. You should not define functions inside of an `if` block. Define the function and perform the logic inside the function. Additionally, it's unclear exactly how the code is supposed to work. Please read how to create a [mcve]. – Heretic Monkey Oct 18 '16 at 17:17
  • I think you might be confused about what `window.top == window.self` does. If you're checking scroll position as I think you are you should be using something like `document.body.scrollTop == 0` – Steven B. Oct 18 '16 at 17:24

1 Answers1

0

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");
    }
}
Community
  • 1
  • 1
Dan Beaulieu
  • 330
  • 1
  • 11
  • would this function vary depending on the browser? it works fine on chrome but with IE it just appears upwards and does not disappear when I click anywhere on screen. – Emmet Jan 19 '17 at 15:13
  • my response only demonstrated how to conditionally define functions. after reading further it seems [scrollY](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY) would be more useful to use for conditionally assigning the function. [window.top](https://developer.mozilla.org/en-US/docs/Web/API/Window/top) has to do with frames and not scoll position – Dan Beaulieu Jan 19 '17 at 15:40