jQuery 및 CSS를 사용하여 페이지 스크롤 팝업

방문자가 여러분의 웹 사이트 홈페이지를 방문하여 페이지를 아래로 스크롤하면 팝업이 나타납니다.
그리고 팝업에 원하는 내용을 삽입하면 됩니다.

HTML

   <div id="p-scroll" style="display: none;">
       <!--close button-->
       <a class="closePscroll" href="javascript:void(0);" onclick="return closePScroll();">
           닫기
       </a>
       <!-- 실제 팝업내용들어가는 곳 {-->
       <div class="card">
          <div class="card-header">
            강좌회원
          </div>
          <div class="card-body">
            <h5 class="card-title">엄청난 혜택</h5>
            <p class="card-text">600여 동영상강좌 무료 & 100여개 프로그램 무료 다운로드.</p>
            <a href="https://365ok.co.kr/shop/item.php?it_id=1509327166" class="btn btn-primary">신청하기</a>
          </div>
        </div>
        <!-- }실제 팝업내용들어가는 곳 -->
   </div>
 

CSS

  <style>
  #p-scroll{
      background:#f3f3f3;
      border-radius:9px;
      -moz-border-radius:9px;
      -webkit-border-radius:9px;
      -moz-box-shadow:inset 0 0 3px #333;
      -webkit-box-shadow:inset 0 0 3px #333;
      box-shadow:inner 0 0 3px #333;
      padding:12px 14px 12px 14px;
      width:300px;
      position:fixed;
      bottom:13px;
      right:2px;
      display:none;
      z-index:9000;
  }

  .closePscroll{
    position:absolute;
    top:14px;
    right:10px;
    color:#333;
    font-size:10px;
    font-weight:bold;
  }
  </style>

Javascript

  <script src="//http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
      $(window).scroll(function(){
        if($(document).scrollTop()>=$(document).height()/5)
            $("#p-scroll").show("slow");else $("#p-scroll").hide("slow");
      });
      function closePScroll(){
        $('#p-scroll').hide('slow');
      }
    </script>