UI Laboratory

UI 개발을 위한 레퍼런스

Docked Navigation

설명
Docked Navigation은 유연하고 편리한 사용자 UI를 제공한다.
처음 페이지가 로드되면 링크 정보를 담고 있는 Navigation은 정적인 레이아웃 구조를 같는다.
이후 사용자 스크롤에 의해 Navigation이 더 이상 화면에서 보이지 않으면
Navigation은 화면위에 도킹되어 스크롤에 상관없이 이동이 가능한 메뉴를 제공한다.

HTML

jquery.animate-enhanced plugin

Extend $.animate() to detect CSS transitions for Webkit, Mozilla and Opera and convert animations automatically. Compatible with IE6+

demo

	

What it does

The plugin will analyse the properties you're animating on, and select the most appropriate method for the browser in use. This means your transitions on left, top and opacity will convert to a CSS3 transition on Webkit & Mozilla agents that support it, and Opera 10.50+. If the user is on a browser that has no CSS3 transitions, this plugin knows about it and won't get involved. Silent degradation :)
Multiple callback mechanisms are created internally to monitor for DOM manipulation and for all 'transitionend' CSS3 events to be picked up. This means you have one neat callback() for the whole animation regardless on whether the plugin is using CSS3, DOM, or both for its animations.
Progressively enhanced CSS3 animations without having to do any browser detection or special CSS, therefore using the same Javascript across your applications and websites.
As this plugin uses CSS3 translate where available, there is an internal callback mechanism to reset the 'left' and/or 'top' properties so that your layout is unaffected.

Usage

Usage is identical to the jQuery animate() function, but it comes with 3 new paramaters, which are totally optional and safe to leave untouched for general use:

Download

Compressed version (5.17KB, 1.91KB gzipped)
Uncompressed version (13.94KB, 4.33KB gzipped)

Credits

Author: Ben Barnett (Twitter)

License

Licensed under the MIT License.

CSS

					<style type="text/css">
						.container-wrap {padding:20px;}
						h1 {margin-bottom:20px;}
						p {margin-bottom:30px;}
						.jump-module {margin-bottom:40px;}
						.jump-module .jump-nav {padding-left:30px;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
						.jump-module .jump-nav li.last .gotop {display:none;}
						.jump-module.docked {position:fixed; top:0; width:100%; background:#f1f1f1; z-index:99; padding:15px 5px; border-top:1px solid #a4a4a4; border-bottom:1px solid #a4a4a4; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
						.jump-module.docked .jump-nav {width:100%; overflow:hidden;}
						.jump-module.docked .jump-nav li {float:left; margin-right:20px;}
						.jump-module.docked .jump-nav li.last {float:right;}
						.jump-module.docked .jump-nav li.last .gotop {display:block;}

						.syntaxhighlighter {margin-bottom:40px !important;}
					</style>
				

Javascript

<script type="text/javascript">

	var eventBridge = $('
'); var $htmlBody = $('html, body'); var eventDictionary = { global : { RESIZE : 'resize', ROTATE : 'rotate', SCROLL : 'scroll' } }; function getScrollTop(){ return $(window).scrollTop(); } function goToScroll(element, position, speed, func, area){ var pos = position || $(element).offset().top, _speed = speed || 800, callback = (func) ? func() : null, _area = area || 0; $htmlBody.animate({scrollTop : pos - _area}, _speed, function(){callback;}); } (function($){ /** JumpModule Class @class $.JumpModule @constructor **/ $.JumpModule = function(params){ var container = $('.jump-module'), containerClone = container.clone(), jumpLinks = container.find('.jump-link'), jumpLinksClone = containerClone.find('.jump-link'), docked = false; /** @method init **/ function init(){ containerClone.addClass('docked'); containerClone.css('display', 'none'); $('body').append(containerClone); bindEvents(); } function undock(){ if(!docked) return; docked = false; containerClone.css('display', 'none'); //jumpShow(); container.css('opacity', 1); } function dock(force){ var f = typeof force === 'undefined' ? false : force; if(docked && !f) return; containerClone.css('display', 'block'); container.css('opacity', 0); //jumpHide(); docked = true; } function goJumpLink(e){ var dataTarget = $(this).data('target'), jumpHeight = $('.jump-module.docked').outerHeight()+20; e.preventDefault(); goToScroll(dataTarget,'','','', jumpHeight); } function bindEvents(){ jumpLinks.on('click', goJumpLink); jumpLinksClone.on('click', goJumpLink); eventBridge.on(eventDictionary.global.SCROLL, function(e){ var jumpHeight = $('.jump-module').outerHeight(), jumpTop = $('.jump-module').position().top, jumpBottom = jumpHeight + jumpTop, scrollTop = getScrollTop(); if(scrollTop >= (jumpBottom - jumpHeight)){ dock(); }else{ undock(); } }); $(window).on('scroll', function(e){ eventBridge.trigger(jQuery.Event(eventDictionary.global.SCROLL)); }); } init(); } }(jQuery)); $(function(){ new $.JumpModule(); }); </script>