JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://remysharp.com/downloads/jquery.inview.js"></script>
<!-- title project -->
    <div class="section">
        <div class="content">
            <h1>Project title</h1>
        </div>
    </div>

<!-- fist slide-->  
<div class="section" id="gallery-start">
    <div class="content">
        <img src="http://a1.dspncdn.com/media/692x/cd/c6/cd/cdc6cd711a397a4087bdc7d6ab95d326.jpg" class="gallery-element" title="Caption text 1">
    </div>
</div>

<!-- second slide--> 
<div class="section">
    <div class="content">
        <img src="http://a1.dspncdn.com/media/692x/4d/e9/2e/4de92ee18823fd4b002206dacd3e7fb2.jpg" class="gallery-element" title="Caption text 2">
    </div>
</div>

<!-- third slide--> 
<div class="section">
    <div class="content">
        <img src="http://a1.dspncdn.com/media/692x/4a/71/c8/4a71c8f2b710598421489de1baad5838.jpg" class="gallery-element" title="Caption text 3">
    </div>
</div>
    
<!-- caption-->     
<div class="caption-display"></div>

CSS

*{margin: 0; padding: 0; border: 0;}

img{width:50%}

.section{
    text-align:center;
    width: 100%;
    height: 100vh;
}

.content{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

h1{
    display: block;
    font-family: sans-serif;
    font-size: 6rem;
}

.caption-display
{
    font-family: monospace;
    font-size: 0.7em;
    position: fixed;    
    left: 10px;
    bottom: 10px;
}

JavaScript

$('body').scroll(function() {

  console.log( $('section').scrollTop());
    
});