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

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-->
        <script language="javascript" type="text/javascript">
            window.onscroll = function() {myFunction()};
                function myFunction() {
                    if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
                        document.getElementById("myheader").className = "sticky";
            } else {
                document.getElementById("myheader").className = "";
            }
        }
</script>


<!--HTML-->
<div id="myheader">
    //logo and nav
</div>


<!--CSS-->
#myheader{
    position: relative;
}
#myheader.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999;
}