2 Sticky Menus on the same page

#1

Hello, I need to show 2 sticky menus on the same page.

The first one should appear when WindowSrollY > 70pix and the Second when > 500pix

I have no problem with the first one, but it’s impossible to show/hide the second one.

Can anyone help me with that?

Thank you very much :slight_smile:

My file as example: menu-test.rp (51.0 KB)

Murat

Dynamic sticky header (old instagram)
#2

Hi!

The issue is that because you have all ELSE IFs, only one condition out of the four will execute. When the condition “scrollY >= 500” is true, the condition “scrollY >= 70” is ALSO true. And since the latter is the first condition in the list, it will be the only one that executes.

Instead test for the greater value first. I think the following will do what you are trying to do:

#3

Hello, and thank you for your help :slight_smile:

Actually, I need to have both of the Menus on the page:

  • menu 1 need to be shown when scrollY>=70

  • menu 2 need to be shown when scrollY>=500 just under the Menu1

  • menu2 need to be hidden when scrollY<500

  • menu1 need to be hidden when scrollY<70

Here’s my file Test_file.rp (143.5 KB)

And what I can get: http://vzdkuv.axshare.com/#g=1&p=collection

As you can see, I’m not too far, but far from being perfect lol

Thank you again for your help,
Murat

#4

Hi!

My script assumes both objects are on the page, and hides and shows both as you want them to.

[Edit] Attaching file: menu-test.rp (61.5 KB)

#5

Hello josephxbrick :slight_smile:
Thank you very much for your help !

Well I used your file to make my 2 modifications : as you can see, I still can’t have the result I’m waiting for :frowning:

http://vzdkuv.axshare.com/home.html

If you have a minute you can check you file as I modified :
menu-test.rp (60.8 KB)

The second is still displayed and hidden only with the first menu … I’m totally lost :frowning:

Thanks again,
Murat

Edit on Thursday, Nov 2nd:
I have managed to make it work, I have cheated but, it works ^^ thank you for your help.

#7

menu-test.rp (61.2 KB)
Here is the working RP file. The value of 500 was to high, i edited to 140 and it works. Now how to create that those Header 1, Header 2 are always shown, and are at different position. When i scroll, those headers replace the main header and become sticky till next header. How to create that?

#8

Is this what you are looking for ? :slight_smile:

https://ddhqf7.axshare.com/#g=1&p=home

If yes, here the way I’d do it…

menu-test_mb.rp (63.6 KB)

#9

Hi,

I’ve shared a method how to do that as “clean” as possible in Axure: How to prototype sticky navigations

Hope this may help you and others!