문서의 이전 판입니다!
Javascript Scroll Then Snap To Top
<script> var docked = false; var menu = jQuery('#dw__toc'); var init = menu.offset().top; menu.css({ position : "fixed", top: 50, }); menu.addClass("toc_docked"); jQuery(window).scroll(function() { if (!docked && (menu.offset().top - jQuery("body").scrollTop() < 0)) { menu.css({ position : "fixed", top: 50, }); menu.addClass("toc_docked"); docked = true; } else if(docked && jQuery("body").scrollTop() <= init) { menu.css({ position : "inherit", top: init + 'px', }); menu.removeClass("toc_docked"); docked = false; } }); </script>
/******************* TOC ***********************/ #dw__toc { border:1px solid #e5e5e5; padding: 0.5em; border-radius:7px; margin:1em 0.5em; max-width:300px; float:right; h3 { padding-top:0; margin: 0; font-size:18px; line-height:20px;vertical-align:middle;text-align: center } ul {list-style:square; margin:0 0 0 1em;padding:0;color:#aaa;} li { padding-left: 0.7em; text-indent: -1em;} } .toc_docked { margin:0!important; padding:0!important;right:15px; border:none!important; border-radius:0!important; background: no-repeat right top url(images/icon-bookmark.png); } .toc_docked h3 { margin:0; padding:0px; width:44px; height:48px; overflow:hidden; font-size:12px!important; } .toc_docked div{display:none;} .toc_docked:hover h3 ,.toc_docked:active h3 {color:#333; width:auto; height:auto;} .toc_docked:hover div,.toc_docked:active div {display:block;} .toc_docked:hover,.toc_docked:active {background-color:#F5F5F5; padding:0.5em!important; border:1px solid #e5e5e5!important; border-top-left-radius:0em!important; border-top-right-radius:0em!important; border-bottom-left-radius:1em!important; border-bottom-right-radius:1em!important;}