[foundation 6] Topbar fixed avec Offcanvas

Par brokleen, il y a 10 ans

Les bases HTML/CSS

Bonjour,
J'aimerais créer une topbar fix en utilisant les classes offcanvas de foundation 6.
Je rencontre deux problèmes :
Quand je clique sur le boutton pour ouvrir le canvas la page scroll jusqu'au top, j'ai bien essayé de regarder du côté des options du canvas en utilisant scrollTop : false mais rien n'y fait.

Et enfin quand le canvas est ouvert ma topbar n'est plus fixé.

Voilà monde code :

<div class="off-canvas-wrapper"> <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper> <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas></div> <div class="off-canvas-content" data-off-canvas-content> <div class="title-bar"> <div class="title-bar-left"> <button class="menu-icon" type="button" data-open="offCanvasLeft"></button> <span class="title-bar-title">Foundation</span> </div> </div> </div> </div> </div>

Et le css :

.title-bar{ position:fixed; width:100%; }

1 réponse

rafibomb, il y a 9 ans

Good post! Great Off-canvas navigations are particularly hard to find since they are usually required to do so many things: To open left, right, top, bottom, overlap, push, contain submenus, work with sticky or fixed triggers and more.

Thanks to lots of 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. It's seriously better than anything out there! 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