Creating a logo area above the gkMenuWrap navbar

Hi guys,

I'd like to add a 40px high logo area at the top of the page. I want the navbar to appear below this at the top of the page, but as you scroll down, the 40px area disappears and the navbar to stick to the top of the page.

So very similar to how this site works, if you imagine that that image at the top is only 40px high:
http://www.littleco.com/

I've moved the gkMenuWrap down 40px and have created the area at the top. When I scroll down the gkMenuWrap is always 40px from the top.

I would guess that I need to do something like this:
http://jsfiddle.net/luckmattos/yp8HK/1/

Is this the right way to go about this? If so, how do I add custom jQuery to the Simplicity template? I've a total jQuery novice!

Thanks!
Mike

I'm not quite sure this is a correct link - your topbar is sticked to bottom and as you scroll it sticks to top.

I'm not quite sure this is a correct link - your topbar is sticked to bottom and as you scroll it sticks to top.

It's not exactly the same, sure, I just meant it as a rough example.

The thing I want to top is something like:

IF the viewport is at the top of the page, apply a class with styling ''top:40px;' to gkMenuWrap.
IF the visitor scrolls 40px down, remove the above class and add a class with styling "top:0px;' to gkMenuWrap.

Does that makes sense? That's the kind of thing I want to do. But I don't know how to add that kind of code to your site!

Thanks,
Mike

You need to know javascript and you can place this kind of code in gk.scripts.js.