我有一堆的功能来操纵一个div的位置,我需要另一个div(不是子或父)跟随任何位置变化自动。
下面是一个非常简单的例子:http://jsfiddle.net/ZHLD5/
<div id="follower"></div>
<div id="main"></div>
$('#main').draggable();
如何在CSS或jquery中实现这一点,而不改变html结构,而不会在draggable()
和一堆其他代码中混淆选择器?
所以基本上,如何使一个div的位置(不是子或父)完全链接/依赖于另一个div的位置?
$('#main').draggable({
drag: function( event, ui ) {
$('#follower').css({
top: ui.position.top,
left: ui.position.left
});
}
});
另一种方法
只要你使用draggable(jQuery ui),你可以很容易地实现这样的效果。但是由于这个函数被调用了很多次。不要忘记使用id作为性能选择器。
你可以使用CSS属性,而不必使用js。你可以去Overapi查看它们是如何工作的,以便更好地理解它们。在我看来,你应该这样做:
<div class="page_holder">
<div class="stuck"></div>
<div class="page">
<div class="container">
<div class="content"></div>
</div>
</div>
</div>
,然后……
.page_holder{
position: absolute;
top:50px;
left:200px;
width:200px;
height:300px;
}
.page {
position: absolute;
top:0;
left:0;
width:200px;
height:300px;
overflow:auto;
z-index: 1;
}
.container {
position:relative;
}
.stuck {
position: absolute;
top:0;
right:0;
left:0;
height:50px;
background:blue;
margin-right: 18px;
z-index: 2;
}
.content {
height:700px;
background:gray;
}