개발노예 코드와 일상

일단 푸터로 가정하고 스타일을 준다

.ft_fixed {background: #fff; border-top: 1px solid #d3d3d3; padding: 5px 0; position: fixed; left: 0; bottom: 0; z-index: 10; width: 100%; transition: bottom 0.2s ease-in-out} 

.nav-up { bottom: 0px;}
.nav-down {bottom: -62px;}
.nav-end {bottom: 0px;}

스크립트

var lastScrollTop = 0; 
    var delta = 5; 
    var navbarHeight = $('.ft_fixed').outerHeight(); 
    $(window).scroll(function(event){ didScroll = true; }); setInterval(function() { if (didScroll) { hasScrolled(); didScroll = false; } }, 250); function hasScrolled() { 
        var st = $(this).scrollTop(); 
        if(Math.abs(lastScrollTop - st) <= delta) 
            return;
        
    if (st > lastScrollTop && st > navbarHeight){ 
       $('.ft_fixed').removeClass('nav-up').removeClass('nav-end').addClass('nav-down'); 
    } else { 
    if(st + $(window).height() < $(document).height()) { 
        $('.ft_fixed').removeClass('nav-down').removeClass('nav-end').addClass('nav-up'); } 
    } 
    if(st + $(window).height() == $(document).height()) {
        $('.ft_fixed').removeClass('nav-down').removeClass('nav-up').addClass('nav-end'); }
        
    
   lastScrollTop = st; 
   }

/* width */
::-webkit-scrollbar {
  width: 3px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

기본스크롤바가 몬생겨서 항상 변경해서 사용중 

나름 유용하다