JS 자주 사용하는 이벤트

💡 버튼 클릭시 페이지 상단으로 이동

$('.main-top-btn').click(function(){
        window.scrollTo({top:0,behavior:"smooth"})
    })

‘

💡 스크롤이벤트

									let lastScroll = 0; //스크롤 이벤트보다 먼저 선언되어야 

								$(window).scroll(function(){
                
                curr = $(this).scrollTop(); //현재 스크롤 위치
                here = $('.here').offset().top; //문서 전체에서 이벤트 시작 위치
                html = `
                현재스크롤값:${curr}<br>
                here의 스크롤값:${here}
                `;
                $('.fix').html(html);

                if (curr >= here) {
                    $('header').addClass('on')
                } else {
                    $('header').removeClass('on')
                    
                }

								//현재값이 증가할 거고
                // lastscroll은 0이니 당연히 헤더가 사라짐
                // 스크롤 내리면 헤더 사라지는 JS

                if (curr > lastScroll) {
                    $('header').addClass('hide')
                    
                } else {
                    $('header').removeClass('hide')
                    
                }

                //조건 비교 후에 담는다
                //스크롤 올리면 다시 헤더가 생김
                lastScroll = curr;
            })

💡 버튼으로 동영상 재생/정지

<div class="video-area">
      <video src="https://woowahan-cdn.woowahan.com/static/media/main_service.878a686a.mp4" autoplay="autoplay" muted="muted" loop></video>
      <div class="btn-control">
          <button class="btn-play">
              <svg width="80" height="80" fill="none" xmlns="http://www.w3.org/2000/svg" class="">
                  <rect width="80" height="80" rx="20" fill="#000" fill-opacity=".5"></rect>
                  <path fill="#fff" d="M56 40.32L30 57.642V23l26 17.32z"></path>
              </svg>
          </button>
          <button class="btn-pause on">
              <svg width="80" height="80" fill="none" xmlns="http://www.w3.org/2000/svg" class="">
                  <rect width="80" height="80" rx="20" fill="#000" fill-opacity=".5"></rect>
                  <path fill="#fff" d="M26 24h8v32h-8zM46 24h8v32h-8z"></path>
              </svg>
          </button>
      </div>

// 정지 버튼은 on 된 상태로 제작 (호버 됐을 때 바로 표시될 수 있게끔) //

.sc-vision .video-area .btn-control{
    position: relative;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.sc-vision .video-area .btn-control:hover{
    opacity: 1;
}

//버튼의 부모 클래스에 호버를 줘서 간편하게 온오프 될 수 있게끔 한다!//

.sc-vision .video-area .btn-play{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    transform: translate(-50%, -50%);
    display: none;
}

.sc-vision .video-area .btn-pause{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    transform: translate(-50%, -50%);
    display: none;
}

.sc-vision .video-area .btn-play.on{
    display: block;
}
.sc-vision .video-area .btn-pause.on{
    display: block;
}

//버튼은 각각 만들고 온도 각각 주기//

$('.sc-vision .video-area .btn-control').click(function(){

        if($(this).hasClass('on')){//있다면 또
            $('.sc-vision video').get(0).play();
            $('.sc-vision .btn-play').removeClass('on').siblings().addClass('on');
        }else{ //없다면 첫
            $('.sc-vision video').get(0).pause();
            $('.sc-vision .btn-pause').removeClass('on').siblings().addClass('on');
        }
        $(this).toggleClass('on');
    })

💡 슬라이드 탭

<ul class="footer-list">
    <li class="footer-item on">
        <div class="title">
            <p>Nos événements</p>
            <div class="icon">
                <svg height="100%" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9.28125 0.996094V16.9961" stroke="currentcolor" stroke-linecap="round"></path>
                    <path d="M1.28125 8.99609H17.2812" stroke="#143180" stroke-linecap="round"></path>
                </svg>
            </div>
        </div>
        <ul class="footer-sub">
            <li class="sub-item">
                <a href="">
                    Programmation
                </a>
            </li>
            <li class="sub-item">
                <a href="">
                    Réseautage
                </a>
            </li>
            <li class="sub-item">
                <a href="">
                    5 à 7
                </a>
            </li>
            <li class="sub-item">
                <a href="">
                    Activités sportives
                </a>
            </li>
            <li class="sub-item">
                <a href="">
                    Formations
                </a>
            </li>
            <li class="sub-item">
                <a href="">
                    Conférences
                </a>
            </li>
        </ul>
    </li>

//필요한 만큼 li * a 하기!
</ul>

/*탭 만들기 전 마크업이 중요!!!!*/

$('.footer-bottom .title').click(function(){

    if ($(this).hasClass('on')) {
      $(this).removeClass('on').siblings('.footer-sub').slideUp()
    
      
    } else {
      $('.footer-bottom .title').removeClass('on').siblings('.footer-sub').slideUp() //나머지 닫히고 누른 것만 열리기
      $(this).addClass('on').siblings('.footer-sub').slideDown()

    }

  })