I am trying to achieve a scrolling effect where the cover title moves up as I scroll, but unfortunately I am having trouble getting the scrollTop function to work using vanilla JavaScript.
Here is the code snippet:
window.onload = function(){
var coverTitle = document.querySelectorAll('.cover-title');
window.addEventListener("scroll", function(){
console.log(coverTitle.item(0).scrollTop);
});
};.cover{
width: 100%;
height: 500px;
background-image: url('img/cover.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
position: relative;
}
.cover h1{
color: white;
position: absolute;
font-family: serif;
top: 70%;
left: 10%;
}<div class="cover">
<h1 class="cover-title animate fadeIn">Some text</h1>
</div>