当特定的 div 命中它时，或者当它距离顶部 100px 时，我怎样才能让我的固定 header 滚动

Question

我可以看到很多方法与我想要实现的目标相反，但注意到我需要的东西。

我有一个 100 像素高的固定 header。当指定的 div 命中 header 或距屏幕顶部 100 像素时，我希望它与页面的其余部分一起滚动。

我在 header 上添加了一个滚动条 class，这实际上只是使其成为绝对位置，导致 header 跳转屏幕。然后我将它翻译回视图中，这在所有屏幕尺寸上的效果都不一样。

我的下一个想法可能是保持固定不变，但根据滚动位置向 header 添加一个负变换 Y。这将达到我想要的相同效果，但我不太确定如何实现。

如果您需要更多信息，我很乐意提供。

编辑：

以下是一些屏幕截图：

从页面顶部开始：

然后这是我希望 header 变成 un-fixed 并与页面的其余部分一起滚动的地方：

Answer 1

我应该默认制作 .header {position: absolute} 并将此 class 添加到 css（尚未添加到元素）：

.header.active {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

然后就明白我们什么时候需要把这个活动进行到header了。 JS 将帮助：

var targetElement = document.querySelector( YOUR TARGET ELEMENT ),
    header = document.querySelector('.header');

window.onscroll = function(event){
  if ( targetElement.offsetTop > window.pageYOffset ) {
    header.classList.add('active');
  } else {
    header.classList.remove('active');
  }
}

目标元素是当你想要到达它时，header将被固定的元素。如果你需要

Answer 2

查看我的解决方案。希望这有帮助。

const headerEl = document.querySelector('header')
const targetEl = document.querySelector('#target')

const targetTopPos = targetEl.getBoundingClientRect().top

let isHeaderFixed = true

document.onscroll = () => {
  const targetTopOffset = targetEl.getBoundingClientRect().top
  
  if (isHeaderFixed && targetTopOffset < 100) {
    headerEl.style.position = 'absolute'
    headerEl.style.top = `${targetTopPos - 100}px`
    isHeaderFixed = !isHeaderFixed
  }
  
  if (!isHeaderFixed && targetTopOffset >= 100) {
    headerEl.style.position = 'fixed'
    headerEl.style.top = '0px'
    isHeaderFixed = !isHeaderFixed
  }
}

body {
  padding: 0;
  margin: 0;
  position: relative;
}

header {
  position: fixed;
  height: 100px;
  width: 100%;
  background: lightblue;
}

.content {
  line-height: 100px;
}

.target {
  width: 100%;
  background: red;
}

<header>
  Custom header
</header>
<div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit tellus urna, ut tristique felis lobortis sed. Phasellus maximus at magna mattis vulputate. Pellentesque tempor, urna vitae congue pellentesque, est mauris faucibus nulla, vitae molestie leo purus a leo. Curabitur ut mi ac sem finibus consectetur a blandit massa. Morbi ornare tincidunt ipsum, et accumsan erat fringilla a. Cras egestas, nibh vel condimentum ultrices, nunc ipsum tempus magna, eu ullamcorper tortor magna id lacus. Morbi euismod lacus a ligula rutrum, in aliquet lectus blandit. Nam placerat sollicitudin lectus eu ornare. Etiam placerat diam eget magna blandit rutrum. Nulla et luctus massa. Sed sit amet mauris in magna tincidunt consequat. Proin mattis sit amet arcu a gravida. Nullam tempor urna nec dolor convallis consectetur sit amet a elit. Cras ut odio nec lacus efficitur porta nec sit amet justo.
</div>
<div id="target" class="target">target</div>
<div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit tellus urna, ut tristique felis lobortis sed. Phasellus maximus at magna mattis vulputate. Pellentesque tempor, urna vitae congue pellentesque, est mauris faucibus nulla, vitae molestie leo purus a leo. Curabitur ut mi ac sem finibus consectetur a blandit massa. Morbi ornare tincidunt ipsum, et accumsan erat fringilla a. Cras egestas, nibh vel condimentum ultrices, nunc ipsum tempus magna, eu ullamcorper tortor magna id lacus. Morbi euismod lacus a ligula rutrum, in aliquet lectus blandit. Nam placerat sollicitudin lectus eu ornare. Etiam placerat diam eget magna blandit rutrum. Nulla et luctus massa. Sed sit amet mauris in magna tincidunt consequat. Proin mattis sit amet arcu a gravida. Nullam tempor urna nec dolor convallis consectetur sit amet a elit. Cras ut odio nec lacus efficitur porta nec sit amet justo.
</div>

当特定的 div 命中它时，或者当它距离顶部 100px 时，我怎样才能让我的固定 header 滚动

How can i make my fixed header scroll away when a specific div hits it, or when it is 100px from the top

html

javascript

css

css-position

css-transforms