0

I am trying to animate a ScrollTop and running into a few issues with Jank.

This is my script at the moment. On scroll the browser, the div that i'm scrolling 'fancy-scroll' is quite janky.

Unfortunately i can't link to the dev site as it's for a client, but the below is all the code for it. It seems to scroll fine with the scrollbar, but is incredibly janky with the mouse scroll.

Any help would be much appreciated.

$(document).ready(function(e){
  $(window).scroll(function(e) {
      e.preventDefault();
         $('.fancy-scroll').stop().css({
              'top': +($(this).scrollTop() / 1) + "px"
          });
  });
});
  • It looks like you're trying to make the `.fancy-scroll` element stay in position within the viewport when the page is scrolled..? If that's the case use CSS, not JS. Specifically, `position: fixed` – Rory McCrossan Nov 14 '19 at 15:58
  • Were trying to make the content scroll down from underneath another div. Kind of like parallax but on the content rather than on a background image. –  Nov 14 '19 at 16:00

1 Answers1

0

I kind of fixed it by using the following:

$(document).ready(function(e){ $(window).scroll(function(e) { e.preventDefault(); $('.fancy-scroll').stop().css({ //'top': +($(this).scrollTop() / 1) + "px" 'transform': 'translateY( ' + (+($(this).scrollTop() / 5)) + 'px)', }); }); });

Also removing the margin-top i had in the CSS helped a lot.