Как сделать элемент липким внизу окна VH, но продолжайте прокручивать оставшуюся страницу при прокрутке мимо своего конт ⇐ CSS

[Anonymous]

У меня есть кнопка «Узнайте больше» со стрелкой, которая поощряет пользователей прокручивать вниз к следующему разделу страницы, и я хочу, чтобы она всегда появлялась в нижней части окна на загрузке страницы, так что если чье-то окно меньше, чем первый раздел, он все еще видит, но после прокрутки я хочу, чтобы оно прекратило прокручивать дно первого раздела. /> Перед прокруткой: < /p>

Код: Выделить всё

Learn More v
---- bottom of VH ----

---- bottom of section one, off-screen ----
< /code>
после прокрутки < /p>


Learn More v
---- bottom of section one ----

---- bottom of section two ----

Я пытался выяснить это с положением: Исправлен , но это, очевидно, держит его в полном направлении до нижней части страницы. Я пытался исправить это в контейнере, но это не работает. Или мне нужно использовать JavaScript, чтобы ограничить самый дальний, он снижается? < /P>
Я пробовал: < /p>

Код: Выделить всё

#section-one {
position: relative;

.learn-more {
position: fixed;
bottom: 0;

}

}

< /code>
или альтернативно, может быть, < /p>
.learn-more {
position: absolute;
bottom: 0vh;
}
< /code>
Я думаю, что использование vh < /code> для позиционирования может сделать это, когда он абсолютно позиционируется для разделения-один < /code>, но это не является допустимым вариантом для нижнего позиционирования. < /p>
Как это правильно? class = "Snippet-Code-CSS Lang-CSS PrettyPrint-override">#section-one {
position: relative;
background: #c3c3c3;
padding: 40px;
height: 120vh;
text-align: center;

.learn-more {
display: flex;
flex-direction: column;
border: none;
width: 100%;
transition: all .4s;
position: absolute;
bottom: 0;
text-align: center;

&:hover {
color: var(--blue);
transition: all .4s;
transform: translateY(-10px);
}

.caret {
transform: scale(2,1);
margin-top: -10px;
}
}
}

#section-two {
height: 100vh;
padding: 40px;
background: #d3d3d3;
}< /code>

Section One
[list]
[*]"Learn More" below should be visible any time section one is on screen.
[*]Could be in the middle of the section if the bottom of s1 is off-screen
[*]or if the bottom is on-screen then it should stop at the bottom of the section.
[/list]
[url=#section-two]
Learn More
⌄
[/url]




Section Two
"Learn More" should never be in this section, and should scroll up with the bottom of section 1 above

Подробнее здесь: https://stackoverflow.com/questions/796 ... ll-with-re