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

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

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

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

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

자사 구축중인 사이트 http://m.andersen2020.cafe24.com/">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; } //헤더 스크롤감지 업다운 끝