Question

我正在尝试在snap.js（https://github.com/jakiestfu/Snap.js/）中为内容包装器添加一个固定的div。我尝试过的所有东西都失败了，因为snap.js用所有固定元素推送整个画布。这有什么黑客攻击吗？

我嘲笑了我想在这里实现的效果 enter image description here

更新：在对该问题进行进一步调查之后，我得出结论，这个固定的div将需要一个事件监听器来触发相反的变换：translate3d。该脚本的工作原理是将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 这里的关键点是在初始化时添加倒置的Div：

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

}）;

然后你必须“简单地---)”用负（-1）的否定因子来反转过渡 - 但你会看到小提琴。看一下带有评论的JS部分（大概有五六个）/*-------------TESTINVERT*/

如何将固定div添加到snap.js？

2 个答案: