固定位置+在Webkit中可拖动

Question

我的draggable div容器有一个奇怪的问题。

我尝试使用文本可拖动制作Div，并希望每个div的标题都是粘性的。 在Firefox中，所有工作都很完美，但在Chrome（webkit ..）中并不是:(

我的可拖动功能代码是

$content.children().draggable({
    axis: "y",
    snap: true,
    distance: 20,
    start: function(e,ui){
        //...
    },
    drag: function(e) {

        $('.sc_conSticky').each(function(index) {
            var $this = $(this),           // h1.headerSticky
                $wrap = $this.parent(),    // .textwrapper
                $win = $(window);          //window


                var wrapPos = $wrap.offset().top, 
                    elemSize = $this.outerHeight(),
                    wrapSize = $wrap.outerHeight(),
                    scrollPos = 0;    //$win.scrollTop(); always 0 o.O

                if (    scrollPos >= wrapPos  &&
                    (wrapSize + wrapPos) >= (scrollPos + elemSize)) {
                    $this.css({
                        position: 'fixed',
                        top: 0
                    });
                } else if (scrollPos < wrapPos) {
                    $this.css({
                        position: 'absolute',
                        top: 0
                    });
                } else {
                    $this.css({
                        position: 'absolute',
                        top: wrapSize - elemSize
                    });
                }
        });

    },
    stop: function(e,ui) {
        //...
});

我的HTML结构看起来像这样

<div class="textwrapper">
   <h1 class="sc_conSticky">  </h1>
  text text text .... 
</div>
<div class="textwrapper">
   <h1 class="sc_conSticky">  </h1>
  text text text .... 
</div>

在图片中，您可以显示问题。第一个浏览器是chrome，第二个是firefox。

有人知道问题出在哪里吗？

提前致谢！

hansinger

Answer 1

问题解决了！ :)这是由于Chrome的错误。

您不能将“-webkit-transform”与在webkit浏览器中修复的位置一起使用。

有关详细信息，请显示here