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

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>