반응형

홈페이지 제작중

서브메뉴나 레이어를 화면 꽉차게 띄웠는데

안에 내용이 넘어가서 스크롤이되는경우

본 페이지와 중복되어 브라우저 스크롤이 두개이상으로 나오는 경우가있다

몹시 보기싫은 경우인데

이번에 css로 간단하게 수정해서 적어본다

일단 본페이지 스크롤은 html,body 로 적용되고있다

그래서 html,body에 height:100%와 overflow hidden을 주어서 본 스크롤을 없애고

위에 띄우는 레이어의 스크롤만 남기는 방식이다

자바스크립트나 제이쿼리로는

오픈할때 스타일 주고

닫을때 스타일 빼는 작업을 해주면 완성.

728x90
반응형
저작자표시 비영리

'프로그래밍 > javascript' 카테고리의 다른 글

kcaptcha 엑박에 관하여  (0) 2021.11.25
그누보드 - 숫자가 0부터 올라가는 애니메이션  (0) 2021.10.05
swiper slider js에서 반응형 지원하는 슬라이더  (0) 2021.03.02
javacsript : after(), insertAfter(), before(), insertBefore();  (0) 2020.12.28
그누보드 javascript 시간 시분초로 나눠서 구하기  (0) 2020.11.26
반응형

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

.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; 
   }

728x90
반응형

'프로그래밍 > javascript' 카테고리의 다른 글

javascript tab  (0) 2019.07.25
인스타그램 사진 가져오기  (0) 2019.07.25
엔터키로 form submit  (0) 2019.07.23
페이지 화면 상단이동 버튼  (0) 2019.07.23
페이지 넓이구하기  (0) 2019.07.23

+ Recent posts

티스토리툴바