Javascript – Position fixed and width 100% element covering vertical scrollbar in IE

internet explorerjavascriptjqueryscrollbar

I have a div with WIDTH 100% and position fixed on the top of the page. It covers the vertical scrollbar in IE when vertical scrolling is needed on the html.

What can I do to avoid this (I can't change the position fixed bit)?

Can I detect whether page need vertical scrolling onload/resize and change that static div's width using jQuery?

Solve it through CSS altogether?

Best Answer

Found the problem: I accidentally attached overflow:auto on the body tag when it was only meant for the html tag.

Related Solutions

Javascript – Retrieve the position (X,Y) of an HTML element

The correct approach is to use element.getBoundingClientRect():

var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

Internet Explorer has supported this since as long as you are likely to care about and it was finally standardized in CSSOM Views. All other browsers adopted it a long time ago.

Some browsers also return height and width properties, though this is non-standard. If you're worried about older browser compatibility, check this answer's revisions for an optimised degrading implementation.

The values returned by element.getBoundingClientRect() are relative to the viewport. If you need it relative to another element, simply subtract one rectangle from the other:

var bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offset   = elemRect.top - bodyRect.top;

alert('Element is ' + offset + ' vertical pixels from <body>');

Javascript – How to change scrollbar position

You can calculate the percentage of the current position of the scrollbar using the onscroll event, and if it reaches the 50 % the scroll position can be set to the top of the page with the scrollTo function:

window.onload = function () { 
  window.onscroll = function () { 
    var doc = document.body, 
    scrollPosition = doc.scrollTop,
    pageSize = (doc.scrollHeight - doc.clientHeight),
    percentageScrolled = Math.floor((scrollPosition / pageSize) * 100); 

     if (percentageScrolled >= 50){ // if the percentage is >= 50, scroll to top
       window.scrollTo(0,0); 
     } 
   }; 
};

You can check my example here.

Best Answer

Related Solutions

Javascript – Retrieve the position (X,Y) of an HTML element

Javascript – How to change scrollbar position

Related Topic