如何在snap.js中添加固定的div？

Question

我正尝试在snap.js (https://github.com/jakiestfu/Snap.js/)的内容包装器中添加一个固定的div。我尝试过的所有操作都失败了，因为snap.js使用所有固定元素来推送整个画布。有什么办法可以解决这个问题吗？

我在这里模拟了我想要达到的效果

​

更新:经过对这个问题的进一步调查，我得出结论，这个固定的div需要一个事件侦听器，它将触发一个相反的转换:translate3d 3d。该脚本的工作方式是将transform:translate3d设置为与左侧抽屉相同的宽度。下面是代码片段：

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 = '';
                }

有人知道如何编写一个事件侦听器，将固定div的transform3d设置为与内容容器相同的量吗？

Answer 1

你有没有尝试过绝对元素而不是固定元素？

如果保留固定元素，则必须在此元素上添加动画才能与菜单同时移动。

固定元素基于页面的相同源代码(左上角)，如果您将其放入其他元素中，也是如此。

绝对是基于第一个元素是相对的。

Answer 2

我终于找到时间帮你了。是的，你必须颠倒容器的过渡，它保存着你的图像。

你不得不稍微改进一下雅各布的剧本。

首先定义一个容器，在您的"snap-content“容器中包含一个图像。

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

然后你需要添加一些样式：

#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;
}

然后加强雅各布的剧本。

这里没有太多的细节-去他的提琴Fiddle这里的关键点是在初始化时简单地添加你的倒置Fiddle：

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

})；

然后你必须“简单地;-)”用负因子(-1)来反转转换--但你会看到小提琴。看看JS-sections中的注释，比如(大约有5到6个) /*-------------TESTINVERT*/