Question

I have a div that is ‘scrolls’ with css-transfrom. I used jquery offset() to get the top position. This works fine in Chrome, however in internet explorer (9) the the offset does not change. I think it has something to do with the combination of the css transform and the offset function, but I don’t see how to fix this.
This is a small part of my code, but if I log the pos.top after each scroll it does not change in IE.

infoInnerContainer = $('.container_info')
   $window.on('scroll' , function(event) {
     var scrollDisctanceTemp = $window.scrollTop();
     var pos = infoInnerContainer.offset();
     console.log(pos.top); // does not change in IE
}

Any ideas?

Answer 1

You are absolutely right. What I did is get the transform position from the style tag. And add this to the initial position of the element. That worked fine in all browsers. I got it somewhere.

I used the following code:

function matrixToArray(matrix) {
    return matrix.substr(7, matrix.length - 8).split(', ');
}

from this post:

Get the value of -webkit-transform of an element with jquery