Stickyfill Example

:)

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/stickyfill/2.0.5/stickyfill.min.js"></script>
<div class="outer-wrapper">
  <div class="image-slider">
    <img src="https://reserve.com/cloud-images/reserve-media/image/upload/c_fill,g_center,w_1440,h_960,f_jpg,q_auto:good,dpr_1.5/t7xz8erzrheh9f91rsl2.jpg" alt="">
  </div>
  <div class="inner-wrapper">
    <div class="reservation-form">
      <div>
        <h2>타이틀</h2>
        <form action="">
          <input type="text">
          <input type="text">
          <input type="submit">
        </form>
      </div>
    </div>

    <div class="description">
      <h1>헬로월드</h1>
      <p>안녕하세요 반갑습니다.</p>
      <div>
        <img class="sticky" src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284"
          alt="map">

        <p>문서 디자인에 의미있는 글을 담으면 사람들은 양식을 보지 않고 글 내용에 집중하는 경향이 있기 때문에, 글 내용보다 디자인을 보여주는 데 집중하고자 의미 없는 단어를 어딘가 라틴어스럽게 조합해서 만든 글이다.[1] 정확히는 키케로의 최고선악론(De finibus bonorum et malorum) 중 일부(정확히는 1권 32-33문단)를 따온 후 단어를 생략하거나 철자를 바꾸는 등 개발살을 내서 만든 것이므로 아무 의미가 없다. 위의
          문단이 원본과 동일한 부분을 강조해서 표시하면 대략 아래와 같다.
        </p>
      </div>
      <div class="etc">
        <div class="card">
          qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
          laboriosam, nisi ut aliquid ex ea commodi consequatur? quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
        </div>
        <div class="card">
          qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci...

CSS

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.outer-wrapper {
  max-width: 600px;
  margin: 0 auto;
}

.image-slider img {
  width: 100%;
  height: 300px;
}

.inner-wrapper img {
  width: 100%;
}

.description {
  margin: 0;
  padding: 0;
  width: 400px;
  display: inline-block;
  background-color: skyblue;
}

.reservation-form {
  margin: 0;
  padding: 0;
  width: 200px;
  display: inline-block;
  background-color: tomato;
  float: right;
}

.etc {
  min-height: 500px;
}

.etc .card {
  display: inline-block;
}

JavaScript

try {
  console.log('start')
  var elements = document.querySelectorAll('.sticky');
  console.log(elements)
  Stickyfill.add(elements);
} catch (e) {
  console.log(e)
}