Change scroll size setting of gkMenuWrap

Hi,
I'm having quite a trouble getting it done, so I thought I could ask for some help.
What I'm trying to do is to have the top menu (gkMenuWrap) being changed to class "active" after scrolling down a specific pixel size (for example 100px).
Right now, the code is meant to set class=active on gkMenuWrap, after the page scroll size is bigger than the header size, which is something I don't prefer.

Below is the code which I believe needs to be edited

Code: Select all

// menu animation
   if(page_loaded && document.getElement('body').hasClass('imageBg')) {
      // if menu is not displayed now
      if(window.getScroll().y > document.id('gkHeader').getSize().y && !document.id('gkMenuWrap').hasClass('active')) {
         document.id('gkHeaderNav').inject(document.id('gkMenuWrap'), 'inside');
         document.id('gkHeader').setProperty('class', 'gkNoMenu');
         document.id('gkHeader').getElement('div').setStyle('display', 'none');
         document.id('gkMenuWrap').setProperty('class', 'active');
      }
      //
      if(window.getScroll().y <= document.id('gkHeader').getSize().y && document.id('gkMenuWrap').hasClass('active')) {
         document.id('gkHeader').getElement('div').setStyle('display', 'block');
         document.id('gkHeaderNav').inject(document.id('gkHeader').getElement('div'), 'top');
         document.id('gkHeader').setProperty('class', '');
         document.id('gkMenuWrap').setProperty('class', '');
      }
   }

Thanks in advance

Its exactly this line:

Code: Select all

if(window.getScroll().y > document.id('gkHeader').getSize().y && !document.id('gkMenuWrap').hasClass('active')) {


And You need to change it to:

Code: Select all

if(window.getScroll().y > 100 && !document.id('gkMenuWrap').hasClass('active')) {


to show the menu when user scrolls more than 100px from the top.

Thanks a lot, I was typing "100px" and it gave me errors...

JS likes to have dimensions in numbers.
If You would need to set css via JS (for example with jQuery .css method) - then You would need to add 'px' after the number.

I think I need to alter something in gk.menu.js too, but I don't know what.
I would like to have the same mainmenu as the frontpage on every page. So no white background when its over the header. When scrolled down, I would like to have the white background, just like it is on the frontpage.

Could you please post an url to your site?

The URL is http://6gt.nl/

This is what I would like to do:

Please check if adding "imageBg" page suffix to your other "heather" pages helps.

I already have backgrounds for each page, so that wasn't a problem. I just want to remove the white background of the menu on the header of those pages.

From what I see currently you have added:
"imageBgVoordelen"
as a page suffix, but it should be:
"imageBg Voordelen" to make it work correctly.