Добрый день, есть такая страница в которой находится информация о авторе, на мобильной версии заказчик просит добиться следующего результата при скролле текста:
https://streamable.com/4cvcgq (Это готовая версия приложения для iOS, я делаю веб аналог).
Вот мой код, HTML:
<div class="curator__info">
<div class="curator__details" >
<h1 class="curator__name" v-text="curator.name"/>
<p class="curator__about" v-text="curator.about"/>
</div>
</div>
И вот стили:
.curator__info {
position: absolute;
height: 100%;
bottom: 0;
z-index: 2;
padding: 2rem;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
}
.curator__details {
flex: auto;
position: relative;
flex: 0 1 80%;
bottom: 50px;
overflow-y: auto;
padding-top: 55%;
}
.curator__name {
margin-bottom: 1.5rem;
position: sticky;
top: -86%;
}
Вроде результат то что надо, и без JS обходится, но есть одна единственная проблема которую никак не получается решить, текст curator__about (описание) залазит под curator__name (имя куратора), вот видео:
https://streamable.com/ov2n2b
Надо как то запретить текстам накладываться друг на друга, простым решением будет дать фон элементу curator__name, и тогда не будет видно этого накладываемого текста, но так нельзя. Буду рад если сможете помочь)
Вот ссылка на сайт
https://devsite.rovr.live/#/, можете глянуть тыкнув на фотку или на имя:
Средний
