Ещё только начинаю работать над созданием своей страницы. Возник вопрос: как сделать так, чтобы при прокрутке страницы вниз картинка также сдвигалась вниз, а при скролле вверх - наоборот?
При использовании свойства position: sticky элемент прилипает к экрану при прокрутке, пока не встретится с границей родительского блока:
body {
height: 1000px;
}
.img__container {
height: 500px;
background: gray;
}
img {
height: 100px;
position: sticky;
top: 15px;
}<body>
<p>Текст</p>
<div class="img__container">
<img src="https://emojio.ru/images/apple-b/1f60e.png">
</div>
<p>Текст</p>
</body>При использовании свойства position: fixed элемент позиционируется относительно окна браузера и при прокрутке остаётся на месте:
body {
height: 1000px;
}
.img__container {
height: 500px;
background: gray;
}
img {
height: 100px;
position: fixed;
}<body>
<p>Текст</p>
<div class="img__container">
<img src="https://emojio.ru/images/apple-b/1f60e.png">
</div>
<p>Текст</p>
</body>