当特定div击中它时，或者当它距离顶部100px时，如何使我的固定标题滚动

Question

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

我有一个100px高的固定标题。当指定的div击中标题或者距离屏幕顶部100px时，我希望它与页面的其余部分一起滚动。

我曾经在标题中添加了一个滚动类，它实际上只是使它位于绝对位置，导致标题跳转到屏幕。然后我将它翻译成视图，这在所有屏幕尺寸上都不起作用。

我的下一个想法是保持它固定，但在标题中添加负变换，取决于滚动位置。这将达到我想要的效果，但我不太清楚如何实现这一目标。

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

编辑：

以下是一些屏幕截图：

从页面顶部：

然后这就是我希望标题变得不固定并在页面的其余部分滚动的地方：

Answer 1

看看我的解决方案。希望这可以帮助。

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>

Answer 2

我应该默认生成.header {position: absolute}并将此类添加到css（而不是元素）：

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

然后了解我们何时需要在标题上携带此事件。 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');
  }
}

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