我试图将固定的div添加到snap.js(https://github.com/jakiestfu/Snap.js/)中的内容包装器中。我尝试过的一切都失败了,因为snap.js会将所有固定的元素推送到整个画布。是否有此技巧?
我在这里模拟了想要达到的效果
更新:
经过对该问题的进一步调查,我得出的结论是,此固定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设置为与内容容器相反的数量?
最佳答案
您是否尝试过绝对元素而不是固定元素?
如果保留固定元素,则必须在此元素上添加动画以与菜单同时移动。
固定元素基于页面的同一来源(左上),如果您将其放在其他元素中,则该元素也相同。
绝对值基于第一个元素是相对的。