Endless Scrolling Background jumps at certain Viewport sizes

Question

I am trying to create a parallax starscape. This is actually not difficult at all. I am using Velocity.js which makes the endless scroll very smooth. I have noticed though that at certain viewport sizes the image jumps for some reason. I have tried to research this problem and tinker with my code, but to no avail. I made a fiddle https://jsfiddle.net/hunterjr88/gkae3up5/1/ , to show what I am talking about. Resize the window and see the image jump as it scrolls.

$(document).ready(function(){
function infinite(){
            $('#stars').velocity({'backgroundPositionY':['100vh','0vh']},
                              {duration: 2000,easing: 'linear'}); 
            infinite();
}
infinite();
});   

Answer 1

I don't know velocity.js but I can see the issue and can explain what is going on.

Your scroll detect an end in scrolling and since this is an infinite scroll, which will keep on scrolling without stop, when it detects the end it will jump the scroll back to the top, this is why you see this jump.

As I told you I don't know about velocity.js But you need to make sure that your scroll will keep on scrolling smoothly even when the end is detected.