[CSS] position-sticky(스티키)!

왼쪽 스크롤은 내려가고 오른쪽 이미지는 고정된다 이 기능으로 재밌는 css를 꾸며 볼 수 있다

position-sticky이다

 

HTML

<div class="wrap">
    <div class="image">
      <img src="movie_1.jpg" width="100%">
    </div>
    <div style="clear: both;"></div>
    <div class="text">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div style="clear: both;"></div>
    <div class="text" style="margin-top: 300px;">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div style="clear: both;"></div>
    <div class="text" style="margin-top: 300px;">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
  </div>

 

CSS

.wrap {
  background-color: lightgrey;
  height: 2000px;
  margin-top: 500px;
}

.image {
  float: right;
  width: 400px;
  position: sticky;
  top: 100px;
}
.text {
  float: left;
  width: 300px;
}

사용방법 클래스 안에 position:sticky; 해주면 됩니다

 

끝!

 

출처 - 코딩애플