粘性页脚在页面上的某个点停止粘性

问题描述 投票：0回答：2

我正在尝试构建与此页面上的条件粘性页脚相同的功能：https://cashflow.chase.com/increase-cash-in/maximize-your-cash-on-hand.htm

当您向下滚动页面时，页脚会保持在原位，直到页面上的某个点，此时它就成为页面流的一部分并滚动到屏幕外。我需要复制该功能，但我无法弄清楚他们是如何在该页面上执行此操作的。

如果有影响的话，我正在 React 应用程序内部构建此功能。页脚已编码，并且可以作为粘性页脚正常运行，但在某个点不会成为页面流的一部分 - 目前它只是一直保持粘性。

html css position
2个回答
4
投票

您只需使用 

position: sticky;
和 
bottom: 0;
即可实现此目的。

.sticky
{
  position: sticky;
  font-size: 1.4em;
  padding: 10px;
  z-index: 1;
  bottom: 0px;
  background-color: aquamarine;
}
<body>
    <br/><br/><br/>
    <h1>Reference</h1>
    <br><br><br><br>
    <br><br><br><br>
    <br><br><br><br>
    <br><br><br><br>
    <br><br><br><br>
    <h1>Reference</h1>
    <br><br><br><br>
    <br><br><br><br>
    <br><br><br><br>
    <br><br><br><br>
    <br><br><br><br>
    <br><br><br><br>
    <br><br><br><br>
    <br><br><br><br>
    <br><br><br><br>
    <h1>Reference</h1>
    <br><br><br><br>
    <br><br><br><br>

    <div class="sticky">
        Sticky Positioning
    </div>

    <br><br><br><br>
    <br><br><br><br>
    <br><br><br><br>


</body>

0
投票

这个问题解决了吗？ 因为它不适合我。 我希望我的粘性组件具有粘性，但是当页脚出现时；它应该停止粘性并应始终保持在页脚上方。上述解决方案对我不起作用

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.