I have a request from a client who would like to hide a menu and replace it with another on a scroll down. So when a vistor arrives on the page they see one menu, but as soon as they scroll down that menu disappears and a new sleeker fixed position menu appears for example on this website: http://www.fubiz.net/en/

Here's another example where the menu changes color on scroll. http://www.thewowcompany.com/

Here is what I so far: a menu created with Menu Builder and inserted into an HTML element in a fixed position row. http://65.60.26.206/~livewell/

Is there anything in RSD that would allow this row to scroll off the screen and another fixed row appear (with the smaller menu) as soon as someone scrolls?

Just wondering if this is possible?

Many thanks!

There is a code snippet in Foundation called a 'fixed shrink nav'. Maybe that could be an option for you. It has not made its way into RSD as a component yet, but you could try it directly from the Foundation site:
http://foundation.zurb.com/building-blo … nknav.html

Here is another one:
http://callmenick.com/post/animated-res … -on-scroll

You can also use the AOS library to do something very similar. Just apply it to a container with a fixed position at the top.

https://michalsnik.github.io/aos/

I find the AOS library easier to implement into the CC products than some of the other code out there.

Jeff

Interesting site, Jeff. Have to take a closer look at it...

Thanks guys, I will definitely start playing with this. Very interesting!

Here are some general samples I did a while ago with AOS. There's not a header example there though.

http://exploration.coffeecup.com/
(that page changes a lot so if you go there when this post is old it might be different)

Section 4.2.5 of the RSD User Guide gives the impression to me that the 'Out of View' state may be used for getting scrolling to initiate changes in the browser window..

Using the 'Out of View' state in conjunction with Transitions to get things happening when a page first loads seems easy enough, but it is not clear to me how one arranges for changes to be initiated on scrolling.

I am therefore wondering whether the 'Out of View' state could be used to solve the question raised in the first post in this thread, and, if so, exactly how this would be done.

Frank

That's interesting, Frank. I'd be curious to see if the Out of View state can be used to do something like this. It would be nice not to need to use an external code although I do find the AOS very easy to work with in RSD.

It can be done with the 'Out of View' state and taking advantage of the fact that, if the opacity of a container is set to zero, its contents also are invisible

A simple illustration of the principle is in this RSD file, which was built as follows.

1. The Grid was given a Min-height of 2000px so that the page would scroll.
2. Two containers were created, one filled with pictures, and the other with buttons.
3. I set the containers one above the other by giving them a width of 100%.
4. The lower of the two containers (with the buttons) was set to have
(a) in its regular state an opacity of zero,
(b) in its 'out of view' state an opacity of 1, and a position fixed with top at 0px.

Frank