Jump to content

Fixed Navigation on Internet Explorer Covering Page

Recommended Posts

  • Replies 1
  • Views 389
  • Created
  • Last Reply

Add the following JS below. This adds padding to the body equal to the height of the header to push the content down:

(function (document, window) {

  if(document.readyState !== 'complete') {
    window.addEventListener('DOMContentLoaded', function(event){
      init();
    });
  } else {
    init();
  }
  
  function init(){
    var isIE10 = navigator.appVersion.indexOf('MSIE 10') !== -1;
    var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;

    // Exit if we're not in an IE browser.
    if (!isIE11 || !isIE10) return;

    // Add padding to the body based on the height of the Header
    addPaddingToBody();

    // Re-calculate body padding when user resize browser
    window.addEventListener('resize', debounce(function () {
      addPaddingToBody();
    }, 200));
  }

  function addPaddingToBody() {
    var header = document.querySelector('Header');
    var headerHeight = header.offsetHeight;
    document.body.style.paddingTop = headerHeight + 'px';
  }

  function debounce(func) {
    var wait = arguments.length <= 1 || arguments[1] === undefined ? 100 : arguments[1];

    var timeout = void 0;
    return function () {
      var _this = this;

      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }

      clearTimeout(timeout);
      timeout = setTimeout(function () {
        func.apply(_this, args);
      }, wait);
    };
  }
})(document, window);

Make sure the JS code is between <script> tags, example:

<script>
  // Add JS code here
</script>

 

Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.