Я использую скрипт с фиксированным заголовком, который отлично работает в современных браузерах, но совсем не работает в Internet Explorer 11. Я вижу, что он не добавляет фиксированные классы в IE, необходимые для CSS.Пытался его отладить, но консоль мне ничего не показывает.
Ì добавил polyfill document.querySelector и начал использовать 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));
Есть идеи, почему это не работает?