IE8 Issue with fixed and absolute position - html

Question

I have a page with much content. When I open it I have a vertical scroll bar.
I have a small div that should stick to the right side and centered (vertically).
And when user scroll it should be in the same position never move just to be there in the center all the time.
And this work in chrome,ff but I have issues with ie8.
Chrome: div stick as it should be vertical center in the viewport of the browser.
IE8: div stick to the right but it use vertical center of the whole content and I need just a viewport. So if content is height=4000px in ie8 it centers it at 2000th pixel so user have to scroll to see it.
What I did wrong here?
position:fixed;
_position:absolute;
top: 50%;
right: 0;

Answer 1

You could do this with javascript. Here's an example, using jQuery, that I would try:
var calculatedTop = $(window).innerHeight() / 2;
$('#YourDiv').css('top', calculatedTop);
Edit: I've expanded this a bit to recalculate the top position when the user scrolls. Hopefully this helps with your IE8 problem.
$(document).ready(function(){
var reposition = function() {
var calculatedTop = $(window).innerHeight() / 2;
calculatedTop += $(document).scrollTop();
$('#YourDiv').css('top', calculatedTop);
}
// call reposition immediately on initial load
reposition();
// attach to scroll event
$(window).on('scroll', function(){
reposition();
});
});