[JavaScript/jQuery] 플로팅 배너 / 스크롤 따라다니는 배너 적용

플로팅 배너를 띄우려고 한다.

 

일정영역이 지나가면 스크롤을 따라 다니는 플로팅 배너

추후 더 생길 수 있어서 ul > li 구조에 넣었고,

PC와 Mobile이 이미지가 달라서 pc_item / mb_item으로 구분해서 넣었다.

<ul class="event_banner">
  <li>
    <div class="pc_item">
      <a href="javascript:void(0)" onclick="common.hrefFunction('/link1.html')"; >
        <img src="images/banner.png" alt="event banner">
      </a>
    </div>
    <div class="mb_item">
      <a href="javascript:void(0)" onclick="common.hrefFunction('/link.html')";>
        <img src="images/m_banner.png" alt="mobile event banner">
      </a>
    </div>
  </li>
</ul>

html 구조

 

.event_banner {
  width: 120px;
  position: absolute;
  /* top 값은 위치에 따라 다르게 적용될 수 있음.*/
  top: 1000px;
  bottom: auto;
  right: 5.21vw;
  z-index: 90;
  display: block;
}

.event_banner img {
  width: 100%;
}

.event_banner.fixed {
  position: fixed;
  /* top 값은 위치에 따라 다르게 적용될 수 있음.*/
  top: 80px;
}

css 스타일

기본 배너 스타일로는 position : absolute로 위치를 지정해주었다.

그 후에는 fixed로 고정 위치로 따라다니도록 바꿔주기.

 

$(function(){
  $(window).scroll(function() {
    var win = $(window).scrollTop();
    var winWidth = $(window).innerWidth();
    var sectionOffset = document.getElementById('기준영역');
    var section = sectionOffset.offsetTop;

    if ( winWidth > 1023){
      if (win > section ) {
        $('.event_banner').addClass('fixed');
      } else {
        $('.event_banner').removeClass('fixed');
      }
    }
  });
});

script

스크롤이 될 때, pc에서만 적용되도록 했다.

스크롤이 될 때, innerWidth(화면사이즈)가 1023보다 크고, 현재 화면의 스크롤 위치가 section => 기준영역의 높이보다 클때 fixed클래스가 추가되도록 해주었다.

그게 아니라면 fixed 클래스를 삭제해주는 걸로 했다.

 

모바일은 항상 고정으로 해두었기 때문에 따로 fixed 클래스를 줄 필요가 없어서 pc에만 적용했다.