mootools_MooTools ScrollSidebar简介-白红宇

mootools

How many times are you putting together a HTML navigation block or utility block of elements that you wish could be seen everywhere on a page? I've created a solution that will seamlessly allow you to do so: ScrollSidebar. ScrollSidebar allows you to attach an element to a place on the screen and animate the menu to the current scroll position.

您将多少个HTML导航块或实用程序块放在一起，希望可以在页面上的任何地方看到它们？我创建了一个解决方案，可以无缝地使您做到这一点：ScrollSidebar。 ScrollSidebar允许您将元素附加到屏幕上的某个位置，并将菜单设置为当前滚动位置的动画。

HTML (The HTML)


    	
     		
      Top of Page
		
      Homepage
		
      Post on Twitter
		
      Bottom of Page

You may code the menu's HTML any way you'd like. For the sake of accessibility and semantics (I literally just shivered at the thought of following semantics) I've used an HTML list.

您可以使用任何方式对菜单HTML进行编码。出于可访问性和语义的考虑(我实际上只是对遵循语义的想法感到不寒而栗)，我使用了HTML列表。

CSS (The CSS)

#sidebar-menu	{ display:none; width:48px; background:#333; border:1px solid #000; padding:10px; -webkit-border-radius:10px; -moz-border-radius:10px; }#sidebar-menu ul{ padding:0; list-style-type:none; }#sidebar-menu a	{ color:#fff; display:block; height:48px; width:48px; text-indent:-3000px; overflow:hidden; }

You may code the sidebar menu any way you'd like too. No need to worry about positioning the menu though -- the plugin will override that anyway. I highly recommend addressing the menu's width. I'm also defaulting the menu to display:none until the menu can be positioned.

您也可以按照任何方式对侧边栏菜单进行编码。不过，无需担心菜单的位置-插件仍会覆盖该菜单。我强烈建议解决菜单的宽度。我还将菜单默认显示为：none，直到可以定位菜单为止。

MooTools JavaScript (The MooTools JavaScript)

var ScrollSidebar = new Class({		Implements: [Options],		options: {		offsets: { x:0, y:0 },		mode: 'vertical',		positionVertical: 'top',		positionHorizontal: 'right',		speed: 400	},		initialize: function(menu,options) {		/* initial options */		this.setOptions(options);		this.menu = $(menu);		this.move = this.options.mode == 'vertical' ? 'y' : 'x';		this.property = this.move == 'y' ? 'positionVertical' : 'positionHorizontal';		/* ensure a few things */		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 });		/* start listening */		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;	}});/* usage */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		}	});});

I wont bore you with the parameter/option descriptions as they're self-explanatory. I've kept the class very simple. For those who care to see what the functionality looked like pre-Class, here you go:

由于参数/选项说明不言自明，因此我不会为您烦恼。我使课堂很简单。对于那些希望了解功能类似于课前课程的人，这里是：

//paired with smooooothscrollnew SmoothScroll({ duration:300 });//varsvar menu = $('sidebar-menu'), offsetY = 20, offsetX = 20, speed = 450;var setPosition = function(top) {	var scroll = $(document.body).getScroll();	menu.tween('top',scroll.y + offsetY);};//settingsmenu.set('tween',{ duration: speed }).setStyles({	position: 'absolute',	right: offsetX,	top: offsetY,	opacity: 0.8});//eventswindow.addEvents({	scroll: setPosition,	load: setPosition});

As you can probably tell, the functionality was begging to be placed into plugin format.

如您所知，该功能被要求以插件格式放置。

Have any feature suggestions? Share them. If you're looking for a sweet jQuery version, please to see Chris Coyier's take!

有什么功能建议吗？分享他们。如果您正在寻找一个不错的jQuery版本，请看看Chris Coyier的想法！

翻译自:

mootools