RickyH - CSS: Position-x and Position-y

While building out a content management system for DMP I needed to create a toolbar which would stay with position: fixed; on the y-axis, but act like position: absolute on the x-axis. To achieve this I used a clever JavaScript class from David Walsh called scrollspy.

View Demo

The JavaScript

Things you will need first: Mootools (This demo uses 1.2.4) and the ScrollSpy plugin from David Walsh. Next write this for you element:

var ss = new ScrollSpy({
     mode: 'horizontal',
     onTick: function(position,state,enters,leaves) {
          $("sidePanel").style.left = -position.x+"px";
     },
     container: window
});

The CSS

In the CSS use position: fixed; because we have handled the position-x: absolute; in JavaScript. so:

#sidePanel {
     position:fixed;
     left:0;
     top:0;
     width:250px;
     z-index:1000;
}

The above example will keep our sidePanel element from disappearing when you scroll down the page but it will scroll with the page when the user scrolls right.

To do the opposite ie. position-x: fixed; position-y: absolute; In the JavaScript change mode: ‘horizontal’ to mode: ‘vertical’ and -position.x+”px”; to -position.y+”px”; and that’s it any comments, ideas or improvements leave them below.