修复标题Java脚本在Internet Explorer 11中不起作用

Question

我正在使用一个固定的头脚本，它在现代浏览器中运行良好，但在Internet Explorer11中根本不起作用。我可以看到它没有在IE中添加CSS所需的固定类。我试着调试它，但是控制台没有向我显示任何东西。

µ添加了一个document.querySelector polyfill，并开始使用window.pageYOffset而不是原始代码。但仍然不能在IE11中工作。

我想知道在滚动时是否有节流和触发事件的问题(请看脚本的末尾)。

/* FIXEDTHINGs-SCRIPT 2019-09-27 13.13 */

//Fix document.querySelector for old browser
// https://gist.github.com/chrisjlee/8960575
if (!document.querySelector) {
  document.querySelector = function (selectors) {
    var elements = document.querySelectorAll(selectors);
    return (elements.length) ? elements[0] : null;
  };
}
// End Fix for old browser

// ############## Create variables for relevant wrappers ##############   
const stickyWrapper = document.querySelector(".sticky-wrapper");
const navWrapper = document.querySelector(".nav-wrapper");
const searchWrapper = document.querySelector(".search-wrapper");
const containerWrapper = document.querySelector(".container-wrapper");

// ############## GET HEIGHT ##############
// ... of stickyWrapper
let stickyWrapperHeight = stickyWrapper.getBoundingClientRect().height;

// ... of navWrapper 
let navWrapperHeight = navWrapper.getBoundingClientRect().height;

// ... of searchWrapper 
let searchWrapperHeight = searchWrapper.getBoundingClientRect().height;

// ############## GET TOP POSITION ##############
// ... of navWrapper 
let navWrapperTop = navWrapper.getBoundingClientRect().top;

// ... of searchWrapper 
let searchWrapperTop = searchWrapper.getBoundingClientRect().top;

// ############## GET ORIGINAL POSITION ##############
// ... of stickyWrapper
// 1. take top position of stickyWrapper   
// 2. take away the height of stickyWrapper
// 3. add the number of pixels the doc has currently scrolled
let stickyWrapperOrigPos = stickyWrapper.getBoundingClientRect().bottom - stickyWrapperHeight + window.pageYOffset;   

// ... of searchWrapper
// 1. take bottom position of StickyWrapper 
// 2. take away the height of searchWrapper
// 3. add the number of pixels the doc has currently scrolled
let searchWrapperOrigPos = stickyWrapper.getBoundingClientRect().bottom - searchWrapperHeight + window.pageYOffset;   

// ... of navWrapper
// 1. take bottom position of StickyWrapper 
// 2. take away the height of searchWrapper  
// 3. take away the height of navWrapper
// 4. add the number of pixels the doc has currently scrolled
let navWrapperOrigPos = stickyWrapper.getBoundingClientRect().top - searchWrapperHeight - navWrapperHeight + window.pageYOffset;   

// ############## GET ORIGINAL TOP POSITION ##############
// ... of stickyWrapper
// 1. take top position of stickyWrapper   
let stickyWrapperOrigPosTop = stickyWrapper.getBoundingClientRect().top;   

// ############## GET ORIGINAL BOTTOM POSITION ##############
// ... of stickyWrapper
// 1. take bottom position of stickyWrapper   
let stickyWrapperOrigPosBot = stickyWrapper.getBoundingClientRect().bottom;   


// ############## START AND STOP FIXED-EFFECT AT THE RIGHT MOMENT ##############
function stickyThingInit() {
  // check top-Position again (f.e. user refreshes page)
  navWrapperTop = navWrapper.getBoundingClientRect().top;  
  searchWrapperTop = searchWrapper.getBoundingClientRect().top; 
  searchWrapperHeight = searchWrapper.getBoundingClientRect().height; 

  // if window's scroll Y position is at searchWrapper top position
  if (window.pageYOffset > searchWrapperOrigPos) {   

      // add the fixed class to the stickyWrapper
      stickyWrapper.classList.add("sticky-wrapper-fixed");

      // add the fixed class to the searchWrapper
      searchWrapper.classList.add("search-wrapper-fixed");

      // add the fixed class to the navWrapper
      navWrapper.classList.add("nav-wrapper-fixed"); 

      // add the height of searchWrapper to the nav wrapper as top so that it shows after the new searchWrapper position
      navWrapper.style.top = searchWrapperHeight + "px";

      //add padding top to the containerWrapper to prevent jumping and make content visible
      containerWrapper.style.paddingTop = (searchWrapperHeight + navWrapperHeight) + "px";          
  }     

  // If the window's scroll Y position and the height of the searchWrapper and the height of the navWrapper are less than the stickyWrapper top position
  if (window.pageYOffset <= stickyWrapperOrigPosTop) {  

      // remove the sticky class from stickyWrapper
      stickyWrapper.classList.remove("sticky-wrapper-fixed"); 

      // remove the sticky class from searchWrapper
      searchWrapper.classList.remove("search-wrapper-fixed");  

      // remove the sticky class from navWrapper
      navWrapper.classList.remove("nav-wrapper-fixed");  

      // remove the height inline-style from navWrapper
      navWrapper.removeAttribute("style");

      // remove the height inline-style from containerWrapper
      containerWrapper.removeAttribute("style");
  }
}


// function that throttles the event listener (or any function we add)
function throttled(delay, fn) {
  let lastCall = 0;
  return function (...args) {
    const now = (new Date).getTime();
    if (now - lastCall < delay) {
      return;
    }
    lastCall = now;
    return fn(...args);
  }
}

// On scroll, fire the function
throttled(400, window.addEventListener("scroll", stickyThingInit));

你知道为什么它不工作吗？

Answer 1

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
  jQuery(document).ready(function($) {
     $("#bar").mmenu({
       "slidingSubmenus": false,
       "extensions": [
         "fx-menu-zoom",
         "fx-panels-zoom",
         "pagedim-black",
         "theme-dark",
         "border-offset"
       ],
       "navbars": [{
         "position": "top",
         "content": [
           "<a class='fa fa-user' target='_blank' href='https://facebook.com/mwemaco'></a>",
           "<a class='fa fa-history' target='_blank' href='https://twitter.com/mwemaco'></a>",
           "<a class='fa fa-envelope' target='_blank' href='https://youtube.com/mwemaco'></a>",
           "<a class='fa fa-envelope' target='_blank' href='https://youtube.com/mwemaco'></a>"
         ]
       }, {
         "position": "bottom",
         "content": [
           "<a class='fa fa-facebook' target='_blank' href='https://facebook.com/mwemaco'></a>",
           "<a class='fa fa-twitter' target='_blank' href='https://twitter.com/mwemaco'></a>",
           "<a class='fa fa-youtube' target='_blank' href='https://youtube.com/mwemaco'></a>",
           "<a class='fa fa-instagram' target='_blank' href='https://instagram.com/mwemaco'></a>"
         ]
       }]
     }, {
       classNames: {
         fixedElements: {
           fixed: "hdr-fixer"
         }
       },
       offCanvas: {
         pageSelector: "#page"
       },
     });
     var API = $("#bar").data("mmenu");
     $("#bar").click(function() {
       API.open();
     });
   });

</script>
<style type="text/css">
  .page {
  overflow: hidden;
  display: bock
}

.bar {
  display: block
}

.header {
  overflow: hidden;
  width: 100%;
  min-height: 50px;
  line-height: 50px;
  padding: 10px;
  text-align: left;
  background: #ffffff;
  border-bottom: 1px #d9d9d9 solid;
}

.hdr-fixer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 7;
}

#bar:not(.mm-menu) {
  display: none;
}

.content {
  display: block
}

</style>
</head>
<body>
<div id="page" class="page">
  <div class="header hdr-fixer">
    <a href="#bar">MENU</a>
  </div>
  <div id="bar" class="bar">
    <ul>
      <li><a href="#">Account</a></li>
      <li><a href="#">App</a></li>
      <li><a href="#">About</a>
        <ul>
          <li><a href="/about/history">History</a></li>
          <li><a href="/about/team">The team</a></li>
          <li><a href="/about/address">Our address</a></li>
        </ul>
      </li>
      <li><a href="#">Support</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  <div class="content">
    Hello
    <br>
    <br>Hello
    <br>
    <br>Hello
    <br>
    <br>Hello
    <br>
    <br>Hello
    <br>
    <br>Hello
    <br>
    <br>Hello
    <br>
    <br>Hello
    <br>
    <br>Hello
    <br>
    <br>Hello
    <br>
    <br>Hello
    <br>
    <br>Hello
    <br>
    <br>Hello
    <br>
    <br>Hello
    <br>
    <br>Hello
    <br>
    <br>Hello
    <br>
    <br>Hello
    <br>
    <br>
  </div>
</div>
</body>
<html>