如何在页面底部留下标题，然后在通过时滚动？

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>