i have trouble with a slider on codepen. i have implemented it on my website and recognised that the white highligter of the content is moving if im scrolling on the website. The white highlighter is moving up and down. I really dont know how to fix that. The original code have also the same issue. Maybe someone have an idea? The Code is on codepen.io/JavaScriptJunkie/pen/ZMMRRQ
getBoundingClientRect() provides the coordinates for the rectangle currently in view on screen. By simply adding window.pageYOffset (the is the height above the viewport to the top of the page) to the new Y coordinate you can offset this shifting Y position.
See 16 in this fork of your Codepen: https://codepen.io/yoat/pen/XWzqRKJ
var x = this.getBoundingClientRect().left;
// only the y position changes, not the X or the height!
var y = this.getBoundingClientRect().top + window.pageYOffset;
var width = this.getBoundingClientRect().width;
var height = this.getBoundingClientRect().height;