javascript - 根据滚动量删除和添加边距

Question

CSS

.menu {
   margin-top: 100px;
   width: 100%;
   height: 25px;
   position: fixed;
}

我试图做到这一点，当用户从文档顶部向下滚动 100 像素时，元素 .menu 的 margin-top 被删除。

Answer 1

在纯 JavaScript 中它可能看起来像这样:

window.addEventListener('scroll', function() {
  document.querySelector('.menu').style.marginTop =
    Math.max(0, 100 - this.scrollY) + 'px';
}, false);

.menu {
  margin-top: 100px;
  width: 100%;
  height: 25px;
  position: fixed;
  border: 1px dotted;
}

body {
  height: 1000px;
  margin: 0;
}

<div class="menu"></div>