1

My JavaScript for hiding navigation menu button on scrolling page down and showing on scrolling up does not work with css hack to prevent page in background scrolling when menu is displayed on layer. (here is css method demo page: http://www.luxiyalu.com/playground/overlay/ )

I do suck in JavaScript. I tried to modify script - make it work using element.scrollWidth and element.offsetWidth relation to detect scrolling but can't nail it.

<div class="overlay">
    <div class="overlay-content"></div>
</div>

<div class="background-content">
    lengthy content here
</div>

html, body {
    height: 100%;
}

.overlay{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.8);

    .overlay-content {
        height: 100%;
        overflow: scroll;
    }
}

.background-content{
    height: 100%;
    overflow: auto;
}

    <script type="text/javascript">
    var prevScrollpos = window.pageYOffset;
    window.onscroll = function() {
        var currentScrollPos = window.pageYOffset;
        if (prevScrollpos > currentScrollPos) {
        document.getElementById("mobilemenu").style.top = "0";
        } else {
            document.getElementById("mobilemenu").style.top = "-70px";
                }
    prevScrollpos = currentScrollPos;
    }
    </script>-->

Menu button should be hidden when scrolling down and should reappear when scrolling up WHILE page is styled as presented above.

Imriel
  • 11
  • 2
  • Have a look here and see if it has some answers for you. It discusses several ways of obtaining scroll direction, however, I'm not sure about detecting height: `100%`. --- https://stackoverflow.com/questions/31223341/detecting-scroll-direction – Christopher Bennett May 01 '19 at 04:32
  • I've tried everything I could think of and nothing works... this is killing me. – Imriel May 01 '19 at 11:19
  • I'm trying to make sure I understand what you're trying to do. As far as I understand, you have a menu button, that when someone scrolls down on the page, you want it to vanish instead of scroll out of view? I'm trying to figure it out. – Christopher Bennett May 01 '19 at 11:40

1 Answers1

0

edit: I thought I have it, but after refreshing cache, nothing, and I cant delete post from some reason

Imriel
  • 11
  • 2