Elements with Fixed Positions - Slidebars Advanced Usage

Slidebars uses CSS transitions and transformations for its animation. There is a known issue when transforming elements which contain children with position: fixed; making them behave more like position: absolute;.

Elements with a fixed position can be transformed correctly on their own, so the solution is to place your fixed elements outside of your canvas container, as a direct child of the <body>. Then, simply give the element the canvas attribute.

<!doctype html>
<html>
  <head>...</head>

  <body>
    <div id="fixed-position" canvas="">
    </div>

    <div canvas="container">
    </div>

    <div off-canvas="id-1 left reveal">
    </div>

    <div off-canvas="id-2 right push">
    </div>
  </body>
</html>
Slidebars
Adchsm

Hi, I'm Adam.

I'm a freelance website designer and front-end developer in BCN.

Left and Right

Top and Bottom

Multiple Same Side

Animation Styles

Mobile Only

Custom Widths and Heights

Custom Transition Durations

Callbacks

Events