javascript - 我正在尝试使页眉折叠

Question

我正在尝试在向下滚动时更改标题

html:

<div id="header" class="head"> </div>

CSS:

.head {
    width:100%;
    height: 70px;
    background-color: black;
}
.sticky {
    position: fixed !important;
    height: 40px;
    top: 0;
    width: 100%;
 }

js:

window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
    if (window.pageYOffset > sticky) {
        header.classList.add("sticky");
    } 
    else {
        header.classList.remove("sticky");
    }
}

由于某种原因它不起作用任何人都可以帮忙!？!？

Answer 1

var header = document.getElementById('header');
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add('sticky');
  } else {
    header.classList.remove('sticky');
  }
}

window.addEventListener('scroll', myFunction);

body {
  background: red;
  height: 800px;
}

.head {
  width: 100%;
  height: 70px;
  background-color: black;
}

.sticky {
  background: yellow;
  position: fixed !important;
  height: 40px;
  top: 0;
  width: 100%;
}

<div id="header" class="head"></div>