javascript - 我试图让“技术”这个词只在页面滚动后出现滚动功能词，但它也在顶部 onload 我不想要这个

Question

这是我网站的链接https://avandor.co.uk

这是我的CSS：

```    .tech-header {
    padding-top: 17px;
    font-size: 15px;
    color: #A8A8A8;
    font-style: italic;
    z-index: 20;
    position: relative;
    left: -8px;
    top: -70px;
    transition: all 0.5s ease-in-out;
}



.tech-header.tech {
    top: 0px;
}```

这是我的 JS

```
var mql = window.matchMedia("screen and (min-width: 950px)")

if (mql.matches){ // if media query matches

        const header = document.querySelector('.header');

        const tech = document.querySelector('.tech-header');

            window.onscroll = function(){
            var top = window.scrollY;
        
            if (top >= 800){
                

header.classList.add('active')
            
}else

{
                header.classList.remove('active')
            }
                if (top >= 1300){
               
 tech.classList.add('tech')
           
 }

else

{
                tech.classList.remove('tech')
            }
    
}

}

else{

    const header = document.querySelector('.header');

    const tech = document.querySelector('.tech-header');


        window.onscroll = function(){

        var top = window.scrollY;
    
        if (top >= 150){

            header.classList.add('active')

        }else{

            header.classList.remove('active')

        }

            if (top >= 500){

            tech.classList.add('tech')

        }else{

            tech.classList.remove('tech')
        }
        
    }
}
```

如果您查看我已链接的网站，您会看到“技术”一词位于徽标旁边导航栏的顶部，然后当您向下滚动几个像素时，它就会消失。

我希望它被隐藏起来，直到页面向下滚动到足以让它从上到下移动到徽标旁边。

我希望这是有道理的！任何问题请提出，感谢您提前为我提供的任何帮助！

我通常使用 css，javascript 对我来说是新的，我已经让大多数事情正常工作，只是这一部分没有做我想要的：/

标签： javascripthtmlcss

Answer 1

最初，相应的元素具有技术类

<h1 class="tech-header tach" id="t-navbar">TECH</h1>

从您的 html 中删除“技术”类。html 应如下所示：-----

<h1 class="tech-header" id="t-navbar">TECH</h1>

希望它会工作...... :)