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

Question

我正在为我的页面制作一些内容，我想知道如何才能让下一段的标题在我阅读第一段时保持在底部，然后在阅读时滚动页面我路过吗？

我试图查找它，但我什至没有找到有用的东西。我只是不确定我尝试做的效果叫什么。

提前致谢！

Answer 1

我不太确定我理解了，你会想要类似 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>

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

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

html

javascript

css

tags

jquery