Изменение заголовка в соответствии с положением прокрутки javascript

Question

Ajax данные загружаются как в примере. Я хочу изменить заголовок страницы и URL-адрес в содержимом позиции прокрутки.

это не сработало. Я хочу, чтобы он работал со скроллом.

$('#data').on("mouseenter", 'article', function(){    
            document.title = $(this).data( "title");
            history.replaceState('', "title", $(this).data( "url"));          
});

 <div class="data">
   <br> <br>  <br> <br>  <br> <br>  <br> <br>  <br> <br>  <br>  
   
  <article id="post1" data-url="sample-title1" data-title="Sample Title1" >Sample Title1
  
   <br> <br>  <br> <br>  <br> <br>  <br> <br>  <br> <br>  <br>
  </article>
   <br>    

   <br> <br>  <br> <br>  <br> <br>  <br> <br>  <br> <br> <br> 
   
  <article id="post2" data-url="sample-title2" data-title="Sample Title2" >Sample Title2
  
   <br> <br>  <br> <br>  <br> <br>  <br> <br>  <br> <br>  <br>  
  </article>
   <br>
   <br> <br>  <br> <br>  <br> <br>  <br> <br>  <br> <br>  <br> 
   
  <article id="post3" data-url="sample-title3" data-title="Sample Title3" >Sample Title3
  
   <br> <br>  <br> <br>  <br> <br>  <br> <br>  <br> <br>  <br>  
  </article>
   <br>
   <br> <br>  <br> <br>  <br> <br>  <br> <br>  <br> <br>  <br>  
   
  <article id="post4" data-url="sample-title4" data-title="Sample Title4" >Sample Title4
  
   <br> <br>  <br> <br>  <br> <br>  <br> <br>  <br> <br>  <br>  
  </article>
   <br>
   <br> <br>  <br> <br>  <br> <br>  <br> <br>  <br> <br>  <br>