How can I freeze 2 separate navigations to the top of the browser?


#1

Hi,

I’m looking to freeze navigation 1 in the example below by using a dynamic panel and pinning it to the top of the browser which is easy. However I’m looking to do the same to Navigation 2 so that when I scroll down Navigation 2 will freeze right under Navigation 1. Is it possible to freeze navigation 2 as I scroll down the page so that it sticks under navigation 1 as opposed to freezing in the place it’s in?


#2

See attached… for two different approaches. The magic happens on both in the pageOnscroll event.

The first is a bit jumpier, but it moves on the content on scroll.

The 2nd looks smoother, but requires you to duplicate the 2nd “pinned” header in the pinned area and hide/show.

I think there are other ways to do this, too…

pinHeaders.rp (63.3 KB)


#3

This was exactly what I was looking for, thanks so much for your help!