Issue with getBoundingClientRect()-CodePudding

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

CodePudding user response：

Let me know if this is what you expected :) Here is only javascript that I changed: lhttps://pastebin.com/MPB4fQQm l The main focus is that you are trying to get getBoundingClientRect() for y axis. However, the y axis stays the same all the time.

CodePudding user response：

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;

CodePudding user response：

Is it possible to "pre- Higlight" a content? it is only highlighting if i am going with the mouse over there ...