<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./main.css">
</head>
<body>
  <section class="section section1">
  </section>
  <section class="section section2 sticky">
  </section>
  <section class="section section3">
    <div class="bar">

    </div>
    <div class="sticky2">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt accusamus quam commodi magnam quod qui doloremque quae nesciunt earum corrupti eaque blanditiis voluptatem harum iusto mollitia ut velit officia, distinctio quos aspernatur et nulla consequatur eos nostrum. Ab, molestias qui eligendi architecto laborum quos deleniti inventore? Voluptate ipsum explicabo excepturi, quia molestias consequatur minima iure, culpa repudiandae cupiditate, praesentium illum possimus nesciunt reprehenderit. Maxime accusamus nulla doloremque vero ratione qui inventore nam, a nihil cum! Earum ex aperiam magni voluptatem placeat, voluptatum esse, maxime expedita sequi eum qui alias. Nobis eligendi rem, ipsum repellat rerum dolorum ipsam et perferendis magnam.
    </div>
  </section>
</body>
</html>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.section {
  /* default 값은 position: static 이기 때문에, position: sticky보다 z-index가 낮다. */
  /* z-index가 올라오게 하기 위하여 일반적인 section에도 position: relative를 지정해줌. */
  position: relative;
  background-color: white;
}

.section1 {
  height: 100vh;
  border: 10px solid royalblue;
}

.section2 {
  background-image: url('https://picsum.photos/600/300');
  height: 100vh;
}

.sticky {
  position: sticky;
  top: 0px;
}

.section3 {
  display: flex;
  border: 10px solid teal;

}

.bar {
  width: 10px;
  height: 300vh;
  background-color: gray;
}

.sticky2 {
  position: sticky;
  top: 50px;
  height: 300px;
  background-color: pink;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.