1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90
|
var newEl;
newEl=new Element('a', {'name':'pagetop', 'id':'pagetop'});
newEl.inject($$('body')[0].firstChild,'before');
newEl=new Element('a', {'name':'pagebottom', 'id':'pagebottom'});
$$('body')[0].adopt(newEl);
newEl=new Element('div',{ 'id':'sidebar-menu'});
$$('body')[0].adopt(newEl);
newEl=new Element('ul',{ 'id':'sidebar-menu_ul'});
$('sidebar-menu').adopt(newEl);
newEl=new Element('li',{ 'id':'sidebar-menu_li_0'});
$('sidebar-menu_ul').adopt(newEl);
newEl=new Element('a',{ 'id':'sidebar-menu-top', 'href':'#pagetop', 'title':'Top of Page', 'styles':{'background':'blue'}, 'text':'Top of Page'});
$('sidebar-menu_li_0').adopt(newEl);
newEl=new Element('li',{ 'id':'sidebar-menu_li_3'});
$('sidebar-menu_ul').adopt(newEl);
newEl=new Element('a',{ 'id':'sidebar-menu-bottom', 'href':'#pagebottom', 'styles':{'background':'yellow'}, 'text':'Bottom of Page', 'title':'Bottom of Page'});
$('sidebar-menu_li_3').adopt(newEl);
GM_addStyle('#sidebar-menu { display:none; width:48px; background:#333; border:1px solid #000; padding:10px; -webkit-border-radius:10px; -moz-border-radius:10px; z-index:9999 }');
GM_addStyle('#sidebar-menu ul{ padding:0; list-style-type:none; }');
GM_addStyle('#sidebar-menu a { color:#fff; display:block; height:48px; width:48px; text-indent:-3000px; overflow:hidden; }');
var ScrollSidebar = new Class({
Implements: [Options],
options: {
offsets: { x:0, y:0 },
mode: 'vertical',
positionVertical: 'top',
positionHorizontal: 'right',
speed: 400
},
initialize: function(menu,options) {
this.setOptions(options);
this.menu = $(menu);
this.move = this.options.mode == 'vertical' ? 'y' : 'x';
this.property = this.move == 'y' ? 'positionVertical' : 'positionHorizontal';
var css = { position: 'absolute', display:'block' };
css[this.options.positionVertical] = this.options.offsets.y;
css[this.options.positionHorizontal] = this.options.offsets.x;
this.menu.setStyles(css).set('tween',{ duration: this.options.speed });
this.startListeners();
},
startListeners: function() {
var action = function() {
this.setPosition($(document.body).getScroll()[this.move] + this.options.offsets[this.move]);
}.bind(this);
window.addEvent('scroll',action);
window.addEvent('load',action);
},
setPosition: function(move) {
this.menu.tween(this.options[this.property],move);
return this;
}
});
window.addEvent('domready',function() {
$('sidebar-menu').set('opacity',0.8); //opacity effect for fun
var sidebar = new ScrollSidebar('sidebar-menu',{
offsets: {
x: 20,
y: 20
}
});
});
new SmoothScroll({ duration:300 });
// vars
var menu = $('sidebar-menu'), offsetY = 20, offsetX = 20, speed = 450;
var setPosition = function(top) {
var scroll = $(document.body).getScroll();
menu.tween('top',scroll.y + offsetY);
};
menu.set('tween',{ duration: speed }).setStyles({
position: 'absolute',
right: offsetX,
top: offsetY,
opacity: 0.8
});
window.addEvents({
scroll: setPosition,
load: setPosition
}); |
Partager