Positioning fixed elements in a user interface is a common practice for such cases when we need to have something visible at all times. Without fixed positioning these elements disappear as a user scrolls.

But what about a case when such floating boxes begin to get in the way (of a top navigation or some copyright text at the bottom). Here is a quick and dirty Javascript & CSS experiment which explores a possible solution. This example shows a semi fixed state of sorts for two particular elements. These two elements (the help and footer box) are fixed for the most part, but are then also switched to absolute positioning above a certain scroll threshold to move out of the way as a user scrolls. In a way then, this behaviour allows such navigation elements to be sticky to the edges of smaller container. The best of two worlds perhaps?

Give it a try and let me know what you think.

>> http://linowski.ca/experiments/03_sticky_floating_nav/

In order to increase the item’s discoverability, a second rule has been put in place, which after some inactivity of the mouse regenerates the hidden element. This way, the user is reminded subtly that the interface element is available if needed.

>> http://linowski.ca/experiments/02_onProximity/

Advanced interactions such as double left clicks, right clicks, mouse scrolling, and dragging (not visible here) are increasingly useful for enabling richer ways of providing input. These interaction posibilities, as useful as they are, however are often invisible to the user. More so, often multiple interactions (such as a left click and right click) are possible at the same time in a particular place. That’s where traditional cursors break down. This simple experiment, with the help of some CSS and Javascript, aims to provide clearer visual indicators and combat the problems with floating multi layered cursor affordances.

>> http://linowski.ca/experiments/01_cursor_affordances/