Javascript Scroll Then Snap To Top - 기술

문서의 이전 판을 선택했습니다! 저장하면 이 자료로 새 판을 만듭니다.

====== Javascript Scroll Then Snap To Top ======

<file  Javascript><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>
</file>

<file less>
  /******************* 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;}
</file>

편집 요약

참고: 이 문서를 편집하면 내용은 다음 라이선스에 따라 배포하는 데 동의하는 것으로 간주합니다: CC Attribution-Noncommercial-Share Alike 4.0 International