Stickie nav menu or UI component behaves according to scrolling positions


#1

Hi,

Is it possible to have a dynamic stickie nav menu according to the scrolling positions? I have a sub menu which is on the middle of the page by default. When the page scrolls up and it reaches to the top edge of the browser, the sub menu will stick to the top. When the page scrolls down and the sub menu reaches it’s original position on the page, it will snap back to that position and scroll along with the page. I also have a left column filter which will behave the same. It has it’s original position on the page. It will stick to the top of the page when it scrolls up. The user can still engage the filter while the rest of the page(product list) is being scrolled up and down.

Thanks.

KB


#2

It sounds like you’re trying to make a scroll activated sticky header. If this is the case, then we may have exactly the tutorial for you :slight_smile: You can navigate to our reference pages linked below and follow along with the steps:


#3

Just what I’m looking for, thank you :smile:


#4

I wonder how do I use multiple conditions to set up multiple stickie UI elements which are activated by scrolling. The first condition is to active by scrolling pass certain Y value, then I need a second condition to set up a Y+ value. So the second condition is to check scrolling further until reaches another Y + value. Once the second condition is met, the other UI elements will also stick ( under the header ). Any thoughts?


#5

You can set up multiple cases for interactions by toggling the “If/else” condition and by also adding multiple conditions per case. For example, if you want a first condition for scrolling past a certain Y value, you can create an “If” condition for something like “If [[Window.scrollY]] is greater than ‘value’”.

It sounds like you want to set a parameter for your second condition. You can achieve this by creating another case like in the first example but adding two conditions so it will look something like below:

You will also need to ensure that “Match All” is selected in the top right. Just in case, I have also linked our documentation for conditional logic below:

https://docs.axure.com/axure-rp/reference/conditional-logic