Question

我有这个工作正常的标头。我的问题是，当滚动位置通过114时重新加载页面时，标题直到滚动才固定。我正在尝试使其在用户滚动之前检测页面的滚动位置。

function initHeader() {
  var Header = document.querySelector(".header");

  var HeaderContainer = document.querySelector(".header-container-after");

  document.addEventListener('scroll', function () {
        if (window.scrollY > 114) {
            Header.classList.add('header--is-fixed');
            HeaderContainer.classList.add('fixed-header-container');
        } else {
            Header.classList.remove('header--is-fixed');
            HeaderContainer.classList.remove('fixed-header-container');
        }

  });
}

window.onload = initHeader;

谢谢

Answer 1

有一个甚至更简单的解决方案，请使用position: sticky; top: 0 在到达顶部（或更改顶部值）之前，它将用作相对元素，从那时起，它将充当固定元素。

如果您要坚持使用JS，请将其包装在函数中并在加载时调用

let header;
let headerContainer;

function fixNav(){
  if (window.scrollY > 114) {
            header.classList.add('header--is-fixed');
            headerContainer.classList.add('fixed-header-container');
        } else {
            header.classList.remove('header--is-fixed');
            headerContainer.classList.remove('fixed-header-container');
        }
}

document.addEventListener('DOMContentLoaded', ()=>{
  header = document.querySelector(".header");
  headerContainer = document.querySelector(".header-container-after");

  document.addEventListener('scroll', fixNav);  
  fixNav();
})

Answer 2

看起来您仅在用户滚动时才运行代码。尝试在用户滚动和页面加载时运行它。像这样：

function initHeader() {
  var Header = document.querySelector(".header");

  var HeaderContainer = document.querySelector(".header-container-after");

  // extract the logic to a function
  var updateNav = function () {
      if (window.scrollY > 114) {
          Header.classList.add('header--is-fixed');
          HeaderContainer.classList.add('fixed-header-container');
      } else {
          Header.classList.remove('header--is-fixed');
          HeaderContainer.classList.remove('fixed-header-container');
      }
  }

  // run that function on scroll
  document.addEventListener('scroll', updateNav);
  // but also run it right now (page load)
  updateNav();
}

window.onload = initHeader;

尝试在滚动之前使页眉停留在页面上

2 个答案: