0

我的可拖动 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。

chrome和固定位置错误+可拖动

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

提前致谢！

汉辛格

4

1 回答 1

0

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

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

如需更多信息，请在此处显示

于 2013-05-16T22:26:59.657 回答