[아임웹 코드] 상세페이지에 이벤트 팝업 슬라이드하기

시연 동영상 보기

※ 이 코드는 디자인모드 - 상세페이지 하단에 섹션을 추가하고 그 위에 코드 위젯을 생성하여 사용하실 수 있습니다.

※ 사이즈/위치 등은 사용하실 이미지에 따라 모두 수정해이 필요할 수 있습니다

※ 모바일/커스텀 문의는 우측 톡상담을 통해 문의주세요

<div class="flt_event">

  <img class="eventimg" src="https://cdn.imweb.me/upload/S20231030644a31f02cc95/77e6532fd0d4a.png">

  <div class="buttonlocation"></div>

</div>

  <style>

    .buttonlocation {

    position:absolute;

    cursor:pointer;

    z-index:3;

    width:200px;

    height:20px;

    top:140px;

    left:20px;

    }

    .eventimg {

    position:absolute;

    top:-20px;

    left:0px;

    }

    .flt_event {

      position: relative;

      width: 60px;

      right: 5px;

      height: 200px;

      box-sizing: border-box;

      margin: 0 auto;

      position: fixed;

      z-index: 2;

      transition: transform 2s ease; 

      transform: translateY(120%); 

    }

    @media (min-width: 600px) {

      .flt_event {

        position: fixed;

        bottom: 20px;

        width: 300px;

        z-index: 1040;

      }

    }

  </style>

<script>

    document.addEventListener("DOMContentLoaded", function () {

      var fltEvent = document.querySelector(".flt_event");

      var scrollThreshold = 1600;  

      var buttonLocation = document.querySelector(".buttonlocation");

      window.addEventListener("scroll", function () {

        var scrolled = window.scrollY || document.documentElement.scrollTop;

        if (scrolled > scrollThreshold) {

          fltEvent.style.transform = "translateY(0)";

        } else {

          // fltEvent.style.transform = "translateY(100%)";

        }

      });

      buttonLocation.addEventListener("click", function () {

        window.open("https://www.naver.com");

        fltEvent.style.display = "none";

      });

    });

</script>