Menu icon Foundation
Fixed OffCanvas TopBar - Solved in Single Page Applications

Hey Guys!
I figured out the way to make Off canvas to be fixed in Top in Single Page Application.
How to do so?

I am using Backbone.js Views

1. Make Off Canvas
2. In of off-canvas, dynamically load views in that element.
If you try to scroll now, the problem is when you click menu icon when you are at bottom of page, off canvas will open but on the top.. not where you are in current position. So you need to handle Scroll yourself.
3. Disable the scrolling in document.
4. Add iScroll 4 in the view.

And there you go!
You have Fixed Single OffCanvas Feature in all pages of your application!

off-canvasfixedtopscroll

Hey Guys!
I figured out the way to make Off canvas to be fixed in Top in Single Page Application.
How to do so?

I am using Backbone.js Views

1. Make Off Canvas
2. In of off-canvas, dynamically load views in that element.
If you try to scroll now, the problem is when you click menu icon when you are at bottom of page, off canvas will open but on the top.. not where you are in current position. So you need to handle Scroll yourself.
3. Disable the scrolling in document.
4. Add iScroll 4 in the view.

And there you go!
You have Fixed Single OffCanvas Feature in all pages of your application!

OliverKK over 5 years ago

Could u post a sample page or jsFiddle to share the solution?
cheers mate

Rafi Benkual over 2 years ago

Good news! Thanks to your feedback there was a push to build something better. In Foundation 6.3, released on Dec 15th, there is an all new improved off-canvas. We’d love to hear the challenges or common patterns with off-canvas are you working with. Check out the details and jump in on the conversation!

 

http://foundation.zurb.com/forum/posts/49868-new-improved-off-canvas-in-foundation-63