如何在頁面底部留下標題，然後在通過時滾動？

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>