我有这段代码,可以将一个标题元素保持在另一个滚动元素的顶部。
在Firefox和Google Chrome中它完美地工作,但在IE中它非常抖动。代码本身非常简单,我无法想到如何可能改进它。
在Chrome和Firefox中,标题始终静止地位于顶部,但在IE中会像拿到糖果袋的小孩一样跳来跳去。
由于我正在使用JQueryUI sortable功能,所以我不能更改HTML布局。
无论如何,以下是代码:
在Firefox和Google Chrome中它完美地工作,但在IE中它非常抖动。代码本身非常简单,我无法想到如何可能改进它。
在Chrome和Firefox中,标题始终静止地位于顶部,但在IE中会像拿到糖果袋的小孩一样跳来跳去。
由于我正在使用JQueryUI sortable功能,所以我不能更改HTML布局。
无论如何,以下是代码:
http://jsfiddle.net/0va4dn0q/8/
$('.container').scroll( function() {
var fromTop = $(this).scrollTop(),
Header = $(this).find('.header');
Header.css('margin-top', fromTop + 'px');
});
$('.sortable').sortable({
connectWith: '.sortable',
placeholder: 'ui-state-highlight'
});
div {
width:300px;
}
.sortable {
float:left;
margin:3px solid red;
min-height:200px;
}
.container {
height:200px;
overflow-x:hidden;
overflow-y:auto;
position:relative;
cursor:move;
}
.header {
position:absolute;
top:0;
background-color:orange;
height:20px;
text-align:center;
line-height:20px;
}
.main {
padding-top:20px;
color:white;
background-color:black;
height:1000px;
}
.ui-state-highlight {
height:200px;
}
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="sortable">
<div class="container">
<div class="header">Header 1</div>
<div class="main">hello<br/>hello<br/>hello<br/></div>
</div>
<div class="container">
<div class="header">Header 2</div>
<div class="main">bye<br/>bye<br/>bye<br/></div>
</div>
</div>
<div class="sortable">
<div class="container">
<div class="header">Header 3</div>
<div class="main">splurge<br/>splurge<br/>splurge<br/></div>
</div>
<div class="container">
<div class="header">Header 4</div>
<div class="main">lorem ipsum<br/>dolor<br/>sit<br/></div>
</div>
</div>
sortable
函数,我无法更改HTML。请参见问题中更新的示例代码。 - Jamie Barker