Question

我希望有人可以帮助我解决我无法实现的功能。

这里是场景：我有一个包含四个部分的长页面。当我加载此页面时，页面中间有一个固定的文本，表示＆＃34;一个＆＃34;。向下滚动到第二部分时，固定文本从＆＃34;一个＆＃34;到＆＃34;两个＆＃34;。＆＃34; 2＆＃34;褪色到＆＃34;三＆＃34;向下滚动到第三部分;等等。

这种功能是否可行？我假设它涉及jquery和css。

谢谢！

Answer 1

实际上，现在可以使用仅限position: sticky的CSS解决方案来完成，具体取决于您的布局。检查MDN有关其工作原理的更多信息，您还可以获得与您的用例非常相似的codepen示例。

根据您的示例，这里是工作代码。

<强> HTML

<div class="container">
    <div>
        <div class="heading">One</div>
        <div class="content">
            content
        </div>
    </div>
    <div>
        <div class="heading">two</div>
        <div class="content">
            content
        </div>
    </div>
    <div>
        <div class="heading">three</div>
        <div class="content">
            content
        </div>
    </div>
    <div>
        <div class="heading">Four</div>
        <div class="content">
            content
        </div>
    </div>
</div>

<强> CSS

.heading {
    height: 50px;
    line-height: 50px;
    font-size: 30px;
    padding-left: 10px;
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
}

.content {
    height: 300px;
    background: green;
}

请注意，您需要将sticky元素包装到另一个div中，以便他知道什么时候过时并且需要从视口中删除它自己。

在页面的某些点更改固定文本

1 个答案: