코딩 연습장

Angular CLI: 17.1.0
Node: 18.16.0
Package Manager: npm 9.5.1
OS: linux x64

(Tailwind 사용)

문제: scroll 이벤트를 감지를 못 해서 계속 console이 찍히지 않음

windowScrolled = false;
   
ngOnInit() {
window.addEventListener('scroll', (event) => {
  console.log('스크롤 이벤트 발생');
  this.windowScrolled = window.scrollY !== 0;
});
}  

scrollToTop() {
window.scrollTo({
  top: 0,
  behavior: 'smooth',
});
}

문제 원인: sidenav의 h-screen 

h-screen을 지워주니까 scroll event도 감지하고 window.scrollTo 도 잘 먹었다.

 아래 코드를 보면 sidenav에 h-screen이 존재

<div class="bg-[#F8F7FC]">
  <mat-sidenav-container
    (backdropClick)="closeEvent()"
    class="h-screen bg-[#F8F7FC]"
  >
    <mat-sidenav #sidenav autoFocus="false" [mode]="'over'">
      <sidenav></sidenav>
    </mat-sidenav>

    <mat-sidenav-content class="flex flex-col">
      <app-toolbar></app-toolbar>

      <!-- class="main_area" -->
      <main class="pt-20 bg-[#F8F7FC] h-full w-[1440px] mx-auto px-8">
        <router-outlet></router-outlet>
      </main>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

js (js 버전이 이거로만 오류가 안 남)

$(function() {
  $('#fullpage').fullpage({
    fingersonly: true,
    anchors:['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'fifthPage', 'sixthPage', 'seventhPage'],
    menu: '.rightNav',
    // count up  
    afterLoad: function(anchorLink, index){
      if(index == 2){ //두번째 페이지에 카운트업
        $('.count').counterUp({delay: 10,time: 550});
      }
      if(index == 3){ //세번째 페이지에 카운트업
      $('.count2').counterUp({delay: 10,time: 550});
      }
    }
  });
});

html

  <!--section2-->
        <div class="section" id="section2">
          <div class="inner">
            <p class="label">SINCE 2006</p>
            <p class="tit">대한민국 쌀국수의 역사, <br>
                          포메인으로부터.
            </p>
            <div class="countBox">
              <p class="count">32,490,058</p>
              <p class="txt">쌀국수 누적 판매량</p>
              <p><img src="img/ico_sales_volume.png" alt=""></p>
            </div>
          </div>
        </div>

        <!--section3-->
        <div class="section" id="section3">
          <div class="inner">
            <div class="topBox">
              <p class="tit">베트남 요리, <span>31가지 감동을 담다</span></p>
              <a href="#" class="btn">포메인 전체메뉴 보기</a>
              <p class="txt">*매장별로 판매메뉴는 상이할 수 있습니다.</p>
            </div><!--topBox-->
            <div class="bottomBox">
              <ul>
                <li>
                  <p class="img"><img src="img/ico_menu_info_01.png" alt=""></p>
                  <p class="data"><span class="count2">13</span><strong>th</strong></p>
                  <p class="txt">SINCE2006</p>
                </li>
                <li>
                  <p class="img"><img src="img/ico_menu_info_02.png" alt=""></p>
                  <p class="data"><span class="count2">139</p>
                  <p class="txt">매장 수 <span>( 2009년 3월 기준 )</p>
                </li>
                <li>
                  <p class="img"><img src="img/ico_menu_info_03.png" alt=""></p>
                  <p class="data"><span class="count2">767</span><strong>억</strong></p>
                  <p class="txt">매출액 <span>( 2018년 기준 )</span></p>
                </li>
              </ul>
            </div><!--bottomBox-->
          </div><!--inner-->
        </div>

html 마크업

gnb 아래요소는 형제요소로 작성하기

    <!-- header -->
    <header>
      <div class="innerHeader">
        <h1 class="logo"><a href="index.html"><img src="img/logo.png" alt=""></a></h1>
        <ul class="gnb">
          <li><a href="#">phomein</a>
              <ul class="inner">
                <li><a href="#">브랜드소개</a></li>
                <li><a href="#">CSR</a></li>
                <li><a href="#">멤버쉽</a></li>
                <li><a href="#">상품권</a></li>
              </ul>
          </li>
          <li><a href="#">menu</a>
              <ul class="inner">
                <li><a href="#">메뉴소개</a></li>
              </ul>
          </li>
          <li><a href="#">store</a>
              <ul class="inner">
                <li><a href="#">2018모범매장</a></li>
                <li><a href="#">매장찾기</a></li>
              </ul>
          </li>
          <li><a href="#">community</a>
              <ul class="inner">
                <li><a href="#">브랜드</a></li>
                <li><a href="#">CSR</a></li>
                <li><a href="#">멤버쉽</a></li>
              </ul>
          </li>
        </ul>
        <a href="#" class="franchise">프렌차이즈</a>
      </div>
    </header>

js

//2.GNB
$(function(){
  setGnb();

  function setGnb() {
   $('.innerHeader .gnb > li > a').on('mouseenter focus', function(){
      $('.innerHeader').addClass('on');
      $('.innerHeader .gnb > li .inner').addClass('on');
      $('header').css({"border":"none"});
   });

   $('header').on('mouseleave', function(){
      $('.innerHeader').removeClass('on');
      $('.innerHeader .gnb > li .inner').removeClass('on');
      $('header').css({"border-bottom":" 1px solid rgba(255,255,255,0.1)"});   
   })
  }
});

css link

  <!-- css -->
  <link rel="stylesheet" href="css/fullpage.css">

js link

  <script src="js/jquery-1.10.2.min.js"></script> 꼭 이걸로 쓰기

  <!-- script  -->
  <script src="js/jquery-1.10.2.min.js"></script>
  <script src="js/jquery.fullpage.js"></script>
  <script src="js/main.js"></script>
  <script src="js/jquery.counterup.min.js"></script>

css link

  <!-- css -->
  <link rel="stylesheet" href="css/fullpage.css">

js link

  <script src="js/jquery-1.10.2.min.js"></script> 꼭 이걸로 쓰기

  <!-- script  -->
  <script src="js/jquery-1.10.2.min.js"></script>
  <script src="js/jquery.fullpage.js"></script>
  <script src="js/main.js"></script>
  <script src="js/jquery.counterup.min.js"></script>

main.js 

'use strict';

//1. 풀페이지 스크롤
    $(function() {
      $('#fullpage').fullpage({
            fingersonly: true,
         anchors:['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'fifthPage', 'sixthPage', 'seventhPage'],
         menu: '.rightNav'
      });
   });

anchor html

      <!-- 오른쪽네비 -->
      <ul class="rightNav" id="rightNav">
        <li data-menuanchor="firstPage" class="active"><a href="#firstPage"><span>홈</span></a></li>
        <li data-menuanchor="secondPage"><a href="#secondPage"><span>브랜드</span></a></li>
        <li data-menuanchor="thirdPage"><a href="#thirdPage"><span>메뉴</span></a></li>
        <li data-menuanchor="fourthPage"><a href="#fourthPage"><span>서비스</span></a></li>
        <li data-menuanchor="fifthPage"><a href="#fifthPage"><span>사회공헌</span></a></li>
        <li data-menuanchor="sixthPage"><a href="#sixthPage"><span>SNS</span></a></li>
        <li data-menuanchor="seventhPage"><a href="#seventhPage"><span>커뮤니티</span></a></li>
      </ul>

풀페이지 html

    <!-- contents -->
    <div class="fullPageWrap">
      <div id="fullpage">
        <!--section1-->
        <div class="section" id="section1">
          <!-- 섹션_1 이미지슬라이드 -->
        </div>
        <!--section2-->
        <div class="section" id="section2">
          <!-- 섹션_2 -->
        </div>
        <!--section3-->
        <div class="section" id="section3">
          <!-- 섹션_3 -->
        </div>
        <!--section4-->
        <div class="section" id="section4">
          <!-- 섹션_4 -->
        </div>
        <!--section5-->
        <div class="section" id="section5">
          <!-- 섹션_5 -->
        </div>
        <!--section6-->
        <div class="section" id="section6">
          <!-- 섹션_6 -->
        </div>
        <!--section7-->
        <div class="section" id="section7">
          <!-- 섹션_7 -->
        </div>
        <!--footer-->
        <div class="section fp-auto-height">
          <!-- 원하는 높이 지정을 위해 fp-auto-height 옵션 추가 -->
          <div class="footer">푸터</div>
        </div>
      </div><!--fullpage-->

개발자 도구에서 data-anchor 명 확인하고 기억하기

full Page js 주소

https://alvarotrigo.com/fullPage/ko/#page1

링크 

  <script src="js/splitting.min.js"></script>

마크업

  <div class="txt en">
    <div data-splitting>IMAGINE IT,</div>
    <div data-splitting>AND BUILD IT</div>
  </div>

자바스크립트

// splitting 
$(function(){Splitting();}) //첫번째 S 대문자 필수~

CSS

/* text 애니메이션 */
.visual .slick-active .splitting .char {display: inline-block; animation: slide-up 1.2s cubic-bezier(.5, 0, .5, 1) both; animation-delay: calc(0.06s * var(--char-index));}
@keyframes slide-up {
  0% {transform: translateY(30px); opacity: 0;}
  80% {transform: translateY(30px); opacity: 0;}
}

필요한 파일 html 연결

<script src="js/slick.min.js"></script>
<link rel="stylesheet" href="css/slick.css">

// slick
$(function(){
  $('.visual .slide').slick({
    arrows:true,
    dots: true,
    autoplay: true,
    infinite: true,
    fade: true,
    autoplaySpeed: 7000,
    pauseOnHover: false,
    pauseOnFocus: false
  });
});

// FixHeader
var scrollTop = 0;
scrollTop =$(document).scrollTop(); //document 스크롤탑 위치 저장
fixHeader();

// 윈도우창 조절시 이벤트
$(window).on('scroll resize', function(){
  scrollTop =$(document).scrollTop(); //document 스크롤탑 위치 저장
  fixHeader();
})

// fixHeader 고정헤더함수
function fixHeader(){
  if(scrollTop > 150) {
    $('header').addClass('on');
  } else {
    $('header').removeClass('on');
  }
}

/* fixHeader */
header.on .innerHeader {height: 60px; transition: all 0.4s;}
header.on .innerHeader .logo {margin-top: 13px; transition: all 0.4s;}
header.on .innerHeader .logo a img:nth-child(1) {opacity: 0;}
header.on .innerHeader .logo a img:nth-child(2) {opacity: 1;}
header.on .gnb > li {height: 60px; line-height: 60px; transition: all 0.4s;}
header.on .gnb ul.inner.on {top: 60px;}