Позиция: липкая не работает должным образом во Flexbox - PullRequest
Новая
       44

Позиция: липкая не работает должным образом во Flexbox

0 голосов
/ 08 апреля 2020

Я пытался использовать липкий заголовок внутри flexbox, но столкнулся с некоторыми проблемами. По сути, я хочу, чтобы верхний заголовок оставался stati c, а затем прокручивался вверх, как только верхняя часть заголовка в div «subhead» достигает его. Однако прямо сейчас верхний элемент заголовка будет оставаться липким до тех пор, пока не достигнет нижней части div «subhead», что приведет к их перекрытию.

Я использовал flexbox, так что div «subhead» изначально располагался на нижняя часть страницы. Я пытался использовать position: aboslute, но получал тот же результат.

HTML

<div class="top">

    <header>
        <h1>Name</h1>
    </header>

    <div class="subhead">
        <h1>Title</h1>
        <h1>Subhead</h1>
    </div>

</div> 

<div class = "content">
</div>

CSS

h1 {
  text-align: center;
}

.top {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

header {
    position: sticky;
    position: -webkit-sticky;
    top: 15px;
    width: 100%;
    height: auto;
}

.subhead {
    width: 100%;
    height: auto;
    align-self: flex-end;
    margin-top: auto;
}

Я сделал быстрый CodePen для объясните это немного лучше: https://codepen.io/aaronmohr/pen/ExVYyzb

...