views:

21

answers:

1

I want a JS library which can allow me to build an attractive menu which is always visible to the user on the left side of the screen, approx. to the middle.

+1  A: 

Since you've asked for a library, here is in jQuery. It uses CSS position: fixed if it's available, and degrades gracefully to the javascript way if needed.

[See it in action]

CSS

#menu { 
  position: absolute; 
  left: 0; 
  top: 50%; 
  /* ... */
}

Javascript

(function() {

var $menu   = $("#menu");
var $window = $(window);
var menuHalfHeight = $menu.outerHeight() / 2;

var updateMenu = function() {
  $menu.css({
    "margin-top": - menuHalfHeight + $window.scrollTop()
  });   
};

var supportFixed = (function() {
  $menu.css({ position: "fixed" });
  updateMenu();
  return $menu.offset().top > 0; // ~150
})();      

if (!supportFixed) {
  $menu.css({ position: "absolute" });
  $window.scroll(updateMenu);
}

})();
galambalazs
Awesome! Just one problem. When I scroll down ... the animation of the tab to the left is a bit jittery. Can this be stopped? I don't want the user to be disturbed by the animation of it moving down.
demos
see the **updated** answer. Now it's smooth in all browsers.
galambalazs
Thanks a ton! I am a systems guy with barely any exposure to web tech. and you really saved me a lotta time!
demos
@demos no problem :)
galambalazs