Imitating menu bar behaviour

[Benjaminb]

Hey. I'm building a site with a custom overlay menu. So I have made my menu button show/hide on scroll like Lay theme does natively, but Lay theme's menu bar also shows when moving the mouse to the top of the window - and for some reason I can't get the code for it to work.

This is the site: link (it's a staging site)

I made a JSFiddle to show what I'm trying to do: JSFiddle

Basically using a div to detect when the cursor is hovering over it, and moving the menu button down so it's visible. Do you see a reason why jQuery('#detectMouse').hover( function () {} wouldn't work? Syntax? Wrong jQuery library? Nothing happens when hovering. I also tried mouseover/mouseenter/click, which also doesn't work.

Any ideas? Or is there a better way to do this?

[mariusjopen]

Dear @Benjaminb
good question!

Here is the solution:
http://laytheme.com/documentation.html#custom-javascript

Best!

Marius

[Benjaminb]

Thank you, Marius, appreciate it. I got it to work after reading the Binding Click Events section. I totally missed that, because I thought it related to the "newpageshown" stuff above. Always read the manual...

A follow-up question, if I may. I can't seem to get my menu button to drop down at the exact same time as the Lay theme navbar. Mine is close, but if you scroll down a tiny bit using the scroll bar you can see it's a little off. I'm using the same transition transition: top 350ms ease, bot 350ms ease; but the issue is finding the precise scroll amount where the menu shows/hides. But maybe you are using a totally different approach and it's not really comparable :) if so, I'll just say this is good enough.

This is my code

<!-- Hide and show menu on scroll -->
<script>
var didScroll;
var lastScrollTop = 0;
var delta = 40;
var navbarHeight = jQuery('#menuHeight').outerHeight();

jQuery(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 50);

function hasScrolled() {
    var st = jQuery(this).scrollTop();
    
    if(Math.abs(lastScrollTop - st) <= delta)
        return;
    
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        jQuery('#menuHeight').removeClass('showmenu').addClass('hidemenu');
    } else {
        // Scroll Up
        if(st + jQuery(window).height() < jQuery(document).height()) {
            jQuery('#menuHeight').removeClass('hidemenu').addClass('showmenu');
        }
    }
    
    lastScrollTop = st;
}
</script>

[mariusjopen]

Dear @Benjaminb
have a look into toogleClass . It might make things easier.
Then you just add a class with the new position.

Can you show your current work?

Best!

Marius

[Benjaminb]

You misunderstand, that wasn't my question. Sorry if I wasn't clear.

I posted a link to my site in the OP, but here it is: http://www.pingout.net/stg_844b7

My menu is working. I'm using the menubar from Lay theme, with a custom menu button which opens an overlay menu. That's all good.

My issue is a small detail... If you try to scroll (especially using the scroll bar), the timing on when the two menus show/hide doesn't match exactly. I was trying to ask what at which values Lay theme shows/hides the navbar.

But maybe it's not that simple :)

[mariusjopen]

Dear @Benjaminb
it is a bit difficult to access that piece of code right now.
I think the MENU box needs to be exact the same size like the logo box.
Then it might be a bit of try and error?

The logo will go to the position: top: -75px;

Hope you will figure that out!

Best!

Marius

[lortnok]

I am trying to create more or less the same overlay menu but somehow just doesn't work.

I found this tutorial: https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp and copied the code to custom html, css, js. but css seems not working. Can you help me out, please? Thanks a lot in advance!

[mariusjopen]

Dear @Benjaminb
to understand: What exactly is the problem in this case now? :-D

Best!

Marius