在滚动时保持div在固定的x或y位置 - 只是测试 [英] Holding the div at the fixed x or y positon on scrolling - just testing

问题描述

我使用jQuery和CSS创建一个时间轴界面。我使用jScrollPane滚动它。
我有

• parent div应用了jScrollPane


• 标题 div应在垂直滚动时固定，但在水平滚动时滚动，
$ b $ b

示例图片








JSFiddle链接： http://jsfiddle.net/ gACZ8 / 4 /





任何想法？

解决方案

您可以使用 jscrollpane活动。





演示： 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（）; 
}）; 
  

此外，您还应添加 position：relative 两个div（移动它们与顶部/左边不移动其他块）和 z-index 到标题（使它溢出边栏）。




I am creating a timeline interface using jQuery and CSS. I am using jScrollPane for scrolling it. I have

• parent div which wraps all the div and on which jScrollPane is applied
• header div should be fixed while scrolling vertically, but scroll when scrolled horizontally and
• leftpane div should be fixed while scrolling horizontally, but scroll when scrolled vertically

Sample Image

JSFiddle Link : http://jsfiddle.net/gACZ8/4/

Any ideas?

解决方案

You can use jscrollpane events.

Demo: 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();
});

Also you should add position:relative to both divs (to move them with top/left without moving other blocks) and z-index to header (to make it overflow sidebar).

这篇关于在滚动时保持div在固定的x或y位置 - 只是测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！