position: sticky; / 스크롤 내릴 때, 왼쪽 글은 올라가고, 이미지는 멈춰있는 UI만들기
html 코드
- body
- 부모 div
- 이미지
- text
- 부모 div
<body style="background-color: grey; height: 3000px">
<div class="grey">
<div class="image">
<img src="img/cat.jpg" width="100%" />
</div>
<div class="text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam id ad
voluptatum ratione quis doloremque? Rem, provident, modi minima odit
repudiandae explicabo magni consequuntur cum odio cupiditate labore
dolorem iste!
</div>
<div class="text" style="margin-top: 300px">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam id ad
voluptatum ratione quis doloremque? Rem, provident, modi minima odit
repudiandae explicabo magni consequuntur cum odio cupiditate labore
dolorem iste!
</div>
</div>
</body>css
float: right;- 이미지 박스에 설정하여, 이미지를 오른쪽에 배치
float: left;- text 박스에 설정하여, text를 왼쪽에 배치
position: sticky;top: 150px;- 이미지가 top: 150px;에서 멈추고, 부모 div가 거의 다 올라가면, 자식인 이미지도 같이 올라간다.
.grey {
background-color: lightgrey;
margin-top: 500px;
height: 2000px;
}
.image {
float: right;
width: 400px;
position: sticky;
top: 150px;
}
.text {
float: left;
width: 300px;
}
dev