Question

我有这种效果，可以使标题从固定更改为绝对，并在目标div命中时随页面的其余部分滚动。

问题是，如果页面在加载时略微滚动，则会中断告诉页眉在页面上的位置错误的计算，从而破坏效果。我无法解决问题。

代码如下：

window.onresize = function(event) {
            targetTopPos = targetEl.offsetTop + 100;
            console.log(targetTopPos);
        };
        
        const headerEl = document.querySelector('header')
        const targetEl = document.querySelector('#target')
        
        let targetTopPos = targetEl.getBoundingClientRect().top

        let isHeaderFixed = true

        document.onscroll = () => {
            let targetTopOffset = targetEl.getBoundingClientRect().top
            console.log(targetTopOffset);
            
            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 1

如果需要样式，可以尝试使用此js。当js达到特定的滚动高度时，此js将一个类添加到您的标头中。

Lists

如果页面已经稍微滚动，为什么这不起作用？

1 个答案: