我正在使用jQuery和CSS创建时间线界面。我正在使用jScrollPane对其进行滚动。
我有parent
div,它包装了所有div,并在其上应用了jScrollPaneheader
div在垂直滚动时应固定,但在水平滚动时滚动并leftpane
div应该在水平滚动时固定,但是在垂直滚动时滚动
样本图片
JSFiddle链接:http://jsfiddle.net/gACZ8/4/
有任何想法吗?
最佳答案
您可以使用jscrollpane events。
演示:http://jsfiddle.net/gACZ8/10/
$(document).ready(function() {
$('#parent')
.bind('jsp-scroll-y',
function(event, scrollPositionY, isAtTop, isAtBottom) {
$(".header").css("top", scrollPositionY);
}
)
.bind('jsp-scroll-x',
function(event, scrollPositionX, isAtLeft, isAtRight) {
$(".lefter").css("left", scrollPositionX);
}
)
.jScrollPane();
});
另外,您还应该在两个div中添加
position:relative
(以便在顶部/左侧移动它们而不移动其他块),并且在标题中添加z-index
(以使其溢出侧栏)。