Position: sticky по отношению к родительским div-ам
Подскажите, можно ли зафиксировать div (blog_portfolio_nav) при скролле (с отступом top: 20px;)? Скроллиться должно по отношению к div с текстом (blog_portfolio_text), а на шапку и футер не должно забегать. Прочитала кучу статей: пробовала и position: sticky; и position: fixed;, так же встречала громоздкие плагины... но ничего не выходит. Может кто знает простое решение на javascript?
.footer,
.header {
width: 100%;
height: 180px;
background: #92ff92;
text-align: center;
}
.footer {
height: 880px;
}
.blog_portfolio_content {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.blog_portfolio_nav a {
display: block;
}
.blog_portfolio_nav {
width: 30%;
}
.blog_portfolio_text {
width: 67%;
}<div class="header">Шапка</div>
<div class="blog_portfolio_content">
<div class="blog_portfolio_nav">
<a href="#">Ссылка</a>
<a href="#">Ссылка</a>
</div>
<div class="blog_portfolio_text">
Текст... текст... Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст...
текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст...
текст... Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст...
текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст...
текст... Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст...
текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...
</div>
</div>
<div class="footer">Подвал</div>Ответы (1 шт):
Автор решения: Sadykhzadeh
→ Ссылка
Вроде получилось без JavaScript-а)
.footer,
.header {
width: 100%;
height: 180px;
background: #92ff92;
text-align: center;
}
.footer {
height: 880px;
}
.blog_portfolio_content {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.blog_portfolio_nav a {
position: sticky;
top: 20px;
}
.blog_portfolio_nav {
width: 30%;
}
.blog_portfolio_text {
width: 67%;
}<div class="header">Шапка</div>
<div class="blog_portfolio_content">
<div class="blog_portfolio_nav">
<a href="#">Ссылка</a>
<a href="#">Ссылка</a>
</div>
<div class="blog_portfolio_text">
Текст... текст... Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст...
текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст...
текст... Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст...
текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст...
текст... Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст...
текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...Текст... текст...
</div>
</div>
<div class="footer">Подвал</div>