vico vico - 1 year ago 355
Javascript Question

Foundation 6, Sticky menu and offcanvas Position Fixing

Currently using foundation 6 Off canvas with basic html here

<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
Menu off canv

<div class="off-canvas-content" data-off-canvas-content>
<div class="top-bar-container" data-sticky-container>
<div class="sticky" data-options="marginTop:0;" data-sticky data-sticky-on="small" style="width:100%;">
<div class="top-bar">
<div class="row column">
columns content

The Problem here is when user scrolls and then click on offcanvas menu they get brought to the top ( same thing as foundation's doc ) and when they scroll down again the sticky menu acts really funny.

also the offcanvas menu doesn't stick to the side as the user scrolls, which is what the doc on foundation does as well.

I noticed when toggled there is a is-open class on the big wrapper that does a css translate x
this is what is breaking the sticky from position absolute.

when I switched that class to margin-left: -250px; everything works again.

I was looking on the web but couldn't find anything that is related and was wondering if it is just my html structure being incorect or is that really a bug.

Answer Source
<div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right" data-force-top="false">

this prevents scroll to top on the button action.

.off-canvas.position-right { position:fixed; right:-250px; top:0; z-index:1; transition:0.5s ease; }
.is-open-right .off-canvas.position-right { right:-0px; }
.admin-bar .off-canvas.position-right { top:32px; }
.off-canvas { background-color: transparent; }
.is-open-right { -webkit-transform: initial; transform: initial; margin-left: -250px; }
.off-canvas-wrapper-inner { transition: margin 0.5s ease; } { left:0px !important; transition:0.5s; }
.is-open-right { left:-250px !important; }

my css restructure to use the good old margin negative.

These changes makes it look just like how it acts before.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download