How to add a fixed div to snap.js?

Question

I am trying to add a fixed div to the content wrapper in snap.js (https://github.com/jakiestfu/Snap.js/). Everything I've tried has failed because snap.js pushes the entire canvas with all the fixed elements. Is there any hack for this?

I mocked up the effect I'm trying to achieve here enter image description here

Update: After further investigation of the issue, I've came to conclusion that this fixed div would require an event listener that would fire an opposite transform:translate3d. The script works by setting transform:translate3d to the same width as the left drawer. Here's the snippet:

x: function(n) {
                if( (settings.disable=='left' && n>0) ||
                    (settings.disable=='right' && n<0)
                ){ return; }

                n = parseInt(n, 10);
                if(isNaN(n)){
                    n = 0;
                }

                if( utils.canTransform() ){
                    var theTranslate = 'translate3d(' + n + 'px, 0,0)';
                    settings.element.style[cache.vendor+'Transform'] = theTranslate;
                } else {
                    settings.element.style.width = (win.innerWidth || doc.documentElement.clientWidth)+'px';

                    settings.element.style.left = n+'px';
                    settings.element.style.right = '';
                }

Would anyone know how to write an event listener that would set the transform3d for the fixed div to the opposite amount as content container?

score 0 · Answer 1 · answered Sep 09 '13 at 09:28

Have you try absolute element instead of fixed element?

If you keep the fixed element, you must add an animation on this element to move at the same time as the menu.

The fixed element is based on the same source of the page (top left) and the same if you put it in other elements.

The absolute is based on the first element is relative.

TorchMan · Answer 2 · 2013-10-12T16:53:08.493

finally i've found time to help you out. Yep, you've got to invert the transition of the container, which holds your image.

You're forced to enhance Jacob's script a little bit.

First define a container, with an image within your "snap-content" - container.

<div id="invertTransDiv">
    <div class="infotext">This DIV (with the red border and it's background image) translates inverted</div>
</div>

Then you've got to add some styles:

#invertTransDiv{
    background: none repeat scroll 0 0 #5E87B0;
    background-image: url("http://jakiestfu.github.io/Snap.js/demo/assets/drag.png");
    background-repeat: no-repeat;
    border: solid red 2px;
    height: 150px;
    left: 50px;
    position: fixed;
    top: 400px;
    width: 200px;
    z-index: 3;
}

.infotext{
    width: 200px;
    margin-top: 50px;
}

Then enhance Jacob's script.

Without going into too much detail here - go for his Fiddle Fiddle The keypoint here is simply to add your inverted Div when initializing:

var snapper = new Snap({
element: document.getElementById('content'),
invertedDiv: document.getElementById('invertTransDiv')

});

And then you've got to "simply ;-)" invert the transistion with a negativ factor of (-1) - but you'll see at the fiddle. Have a look at the JS-sections with comments like (there are about five or six) /*-------------TESTINVERT*/

How to add a fixed div to snap.js?

2 Answers2