Anyone know of a jQuery fisheye/dock navigation plugin that is able to have a fixed position?

Question

Hi,

I'm looking to put a horizontal fisheye/dock nav on my site, but I need it to be fixed positioning... all the ones I've found do not support fixed positioning.

Here are links to some of the ones I've found:

• jQuery OS X Dock #1 - Doesn't support fixed positioning
• CSS Dock Menu - This is very similar to the one above...
• euDock 2.0 - Supports similar to fixed positioning (position:absolute with javascript to make sure it stays in the same place) but this doesn't work because it's way too jumpy when you scroll down (See what I mean by going to that link and scrolling)... real fixed position is usually perfectly smooth with scrolling.

I've yet to see a horizontal one that doesn't break, there is a vertical one that works on the same page as the first link above.

Anyone know any fisheye/dock menu that will work with fixed positioning?

Edit: Changing the positioning to fixed will break the functionality of these menus in particular (they even say it in the article in the first link above). I'm looking for one that won't break if I change the positioning to fixed.

Answer 1

Fixed positioning can be done with CSS.

#main_menu {
  position: fixed;
  top:10px;
  left:10px;
}

I haven't used any of these fisheye javascript things, but I presume they'll work with fixed elements.

Answer 2

getPointer : function(event)
{
    var x = event.pageX || (event.clientX + (document.documentElement.scrollLeft
            || document.body.scrollLeft)) || 0;
    var y = event.pageY || (event.clientY + (document.documentElement.scrollTop
            || document.body.scrollTop)) || 0;
    //subtract, add scrollbar    
    y -= $(window).scrollTop();
    return {x:x, y:y};
},

Modify iutil.js of interface, you show subtract scrollTop

Answer 3

I suggest you try this one.

Why don´t you get your navigation bar in one div, and the content in another div, with overflow auto? Then the navibar is always on top.

Like here: http://www.pmob.co.uk/temp/fixed-header.htm

Answer 4

Some more solutions out-of-the-box to avoid re0inventing the wheel (of course, if license allows)

http://www.ndesign-studio.com/blog/mac/css-dock-menu

Answer 5

You can patch the jQuery interfaces Fisheye with this patch. Then Fisheye works with position: fixed;: http://www.monkey-business.biz/181/jquery-interfaces-fisheye-position-fixed-patch/