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

Question

我正在尝试向 snap.js ( https://github.com/jakiestfu/Snap.js/ ) 中的内容包装器添加一个固定的 div。我尝试过的一切都失败了，因为 snap.js 将所有固定元素推送到整个 Canvas 。有什么破解方法吗？

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

更新: 在对该问题进行进一步调查之后，我得出结论，这个固定的 div 需要一个事件监听器来触发相反的 transform: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

你试过绝对元素而不是固定元素吗？

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

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

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