Fixed left navigation


I have issue with fixing left navigation. I need navigation which should be fixed at left side and it shouldn’t be scrollable top to bottom. When I scroll content from left to right, then left navigation shouldn’ scroll. Only content should scroll from left to right. I tried using pin browser but I’m not able to scroll top to bottom. Could any one update the solution. It would be good if you provide me the solution.

It’s not clear exactly what your problem is… Could you attach your .rp file please?

Hi mbc66,

Thank you for your quick respond. I have attached the sample RP file here. I am working on multiple resolution support. I do not want any horizontal scrollbar within the table. I can manage browser scrollbar. If i see this in 1366*768 screen, my left navigation is hiding.

Fixed_Nav.rp (51.5 KB)

Fixed_Nav_Left.rp (56.2 KB)

Is this the required behavior?


Let’s see if I understand your specific issue and expectations.

  1. The left menu should be pinned to left of browser so that it is in fixed position or “floating” such that it does not move with horizontal scroll.
  2. When the page is scrolled vertically, the left menu should not scroll vertically unless the user is engaged with the menu.
  3. When the user is engaged with the left menu–cursor is over the menu area–and the browser window is shorter than the menu, then the menu should scroll to show the entire menu.

Are you ready for some overkill here? Take a look at this .rp file for three more approaches to solve this issue. Explanations of each approach are included on the pages. Unfortunately, different browsers handle scrolling a bit differently, and as usual, Google Chrome behaves better with Axure prototypes.

Fixed_Nav_Left_2.rp (156.8 KB)

Hi Zuala,

Thank you for updates. Yes, this is what exactly i am looking for it.

Thank you mbc66,

Got it from Zuvala.

Hi mbc66,

May I please ask you if your scrolling pattern utilized in the Fixed_Navigation v5 page of Fixed_Nav_Left_2.rp could be applied to my left navigation containing the repeaters?

I have downloaded your pattern and tried to apply your script to my left navigation panel to have it scrolled independently of the rest of the content, like in your Fixed_Navigation v5 page, but it didn’t work on my end.

shell nav- scroll.rp (1.6 MB)

Would appreciate your any advise on how to incorporate your scrolling technique with my left panel very much.

Thank you in advance!

See this update:
shell nav- scroll-2.rp (1.6 MB)

The basic approach is to use the outer dynamic panel as a mask or viewport. In its OnDrag event, move the contents within the dynamic panel with DragY (if the contents are taller than the dynamic panel, otherwise they don’t need to be moved.)

In your file, you are setting the size of the sidebar dp to 1700 px tall when it collapses, and I’m not sure why… If the intent is for it to take up the entire left side of the window, it does not need to be taller (or shorter) than the window. I added an action to the OnPageLoad and OnWindowResize events to set the size of sidebar and the Left Menu Background widget to the height of the window. I also changed all the statements that set the height of sidebar to a fixed 1700 px --instead setting it to [[Target.height]] so the height does not change when it is shown, hidden, resized or its contents are moved. All of this is to ensure the sidebar dp is not taller than the window, even though its contents might be.

I created a group of the contents within the sidebar dp (everything except the background widget which does not need to be moved) and named it, “Nav Left Group”. This group is what needs to be moved up and down by dragging on the sidebar dp.
I added an action for the sidebar dp’s OnDrag event to test its height against its content’s height and if needed, move Nav Left Group up or down.

Hi mbc66,

Thank you so much!!!

Not sure why the solution that you have posted doesn’t work on my end. I have tried to have the panel scroll in different browsers, but, unfortunately it didn’t. Strangely, I have noticed that a horizontal scrollbar appeared on the bottom of my screen.

Thank you again,

Did you try dragging up and down on the menu? It works basically as a touchscreen-style “drag to scroll”.

I couldn’t get the OnWindowScroll method to work with your example. Perhaps it is too complicated and the scrolling doesn’t get captured properly–I’m not sure. Also, you need to have enough page content height to trigger the browser’s event handler for the mouse scrollwheel. Even when I did this, it would start to scroll the left nav but then stop moving it for some reason.

I did come up with this hack though… When a dp is set to “show scrollbars as needed”, then a scrollbar is shown automatically if the content of the dp is taller than the dp (for a vertical scrollbar) AND that triggers the browser to react to the mouse scrollwheel. So, you can get automatic scrolling for any dynamic panel this way, but only if the scrollbars are shown. This has frustrated me in the past when I don’t want to show the scrollbar. However, it occurred to me this time that the scrollbar could be hidden if the dp were wrapped in another dp and that outer dp was just narrow enough to not show the inner dp’s scrollbar.

See this update:
shell nav- scroll-3.rp (1.6 MB)

Now, the width of the scrollbar will likely vary depending on browser model and OS, so if this doesn’t look right in your browser/OS, you might have to adjust the “sidebar” dp’s OnResize event code. So, the outer dp is named “sidebar mask” and the inner dp is still named “sidebar”. When sidebar gets resized–either OnPageLoad, OnWindowResize, or when cursor enters or leaves it, etc.–it resizes the sidebar mask dp to it’s width minus 17 px, which is the width of the dp scrollbar on my system.

1 Like

Wow, mbc66!!! You truly made magic! This was amazing!

Thank you so much!!!

It really works. Such a phenomenal solution!

Many thanks,

1 Like

Here a final result: Preview
Thank you so much for your help!!!