如何让标题停留在页面底部，然后在经过时滚动

How do you have a title stay at the bottom of the page and then scroll when it is passed by?

本文关键字：然后 滚动 过时 底部 标题 停留在      更新时间：2023-09-26

我正在为我的页面做一些内容，我想知道我如何能够有下一段的标题留在底部，而我正在阅读第一段，但然后滚动的页面，当我通过它?

我已经试着去查了，但我甚至没有运气找到一些有用的东西。我只是不确定我要做的效果叫什么。

提前感谢!

我不完全确定我理解，你想要的东西像THIS?

var title = [];
$('.title').each(function() {
    title.push($(this));
});
$(window).scroll( function() {
    var bottom = $(window).scrollTop() + $(window).height();
    for (var i = 0; i < title.length; i++) {
        if (bottom > title[i].offset().top) {
            $('.currentTitle').text(title[i + 1].text());
        }
    }
    console.log(bottom);
});
.content > h1 {
    margin-top: 300px;
}
.currentTitle {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
    <h1 class="title"> title 1 </h1>
    <p> text 1 </p>
    <h1 class="title"> title 2 </h1>
    <p> text 2 </p>
    <h1 class="title"> title 3 </h1>
    <p> text 3 </p>
    <p class="currentTitle"> title 1</p>
</div>

相关文章：