0
我對我的可拖動div容器有個奇怪的問題。Webkit中的固定位置+可拖動
我嘗試使文本可拖動的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