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
2010-07-14 11:25:49
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
2010-07-14 12:15:42
see the **updated** answer. Now it's smooth in all browsers.
galambalazs
2010-07-14 12:39:27
Thanks a ton! I am a systems guy with barely any exposure to web tech. and you really saved me a lotta time!
demos
2010-07-14 12:55:48
@demos no problem :)
galambalazs
2010-07-14 13:16:15