모바일 스크롤시 헤더 업/다운 + 최상단시 배경 투명

모바일 스크롤시 헤더 업/다운 + 최상단시 배경 투명

QA

모바일 스크롤시 헤더 업/다운 + 최상단시 배경 투명

본문

안녕하세요. 온라인 쇼핑몰운영중입니다. 

 

이번 모바일 메인화면 헤더 영역을 스크롤시 업/다운 하게 설정했습니다. 

추가로 최상단에 있을때 배경을 투명으로 하고싶은데 js 어느부분을 수정하면 될지 궁금해 문의 남김니다. 

 

레퍼런스 사이트 https://www.alloso.co.kr/

자사 구축중인 사이트 http://m.andersen2020.cafe24.com/

 

js 참고사이트 https://webdir.tistory.com/481

 

 

//헤더 스크롤감지 업다운
var didScroll; // 스크롤시에 사용자가 스크롤했다는 것을 알림
var lastScrollTop = 0;
var delta = 0; // 동작의 구현이 시작되는 위치
var navbarHeight = $('.top_section').outerHeight();// 영향을 받을 요소를 선택

$(window).scroll(function(event){ 
    didScroll = true;
}); 

// hasScrolled()를 실행하고 didScroll 상태를 재설정 
setInterval(function() {
    if (didScroll) { 
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() { 
    var st = $(this).scrollTop();
    
    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;

    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.

    if (st > lastScrollTop && st > navbarHeight){

        $('.top_section').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up 
        if(st + $(window).height() < $(document).height()) {
            $('.top_section').removeClass('nav-up').addClass('nav-down'); 
        }
    }
    lastScrollTop = st;
}
//헤더 스크롤감지 업다운 끝

이 질문에 댓글 쓰기 :

답변 1

개발자도구를 이용해서 최상단에 있을때 class를 찾아서 해당 클래스에 css를 넣어주시면됩니다

답변을 작성하시기 전에 로그인 해주세요.
전체 138
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT