title: I am trying to get the word "tech" to only apear once the page is scrolled The scroll function words but it is also at the top onload i dont want this
body: <p>This is the link to my website <a href="https://avandor.co.uk" rel="nofollow noreferrer">https://avandor.co.uk</a></p>
  <p>This is my css:</p>
  <pre><code>```    .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;
  }```
  </code></pre>
  <p>This is my JS</p>
  <pre><code>```
  var mql = window.matchMedia(&quot;screen and (min-width: 950px)&quot;)
  
  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 &gt;= 800){
                  
  
  header.classList.add('active')
              
  }else
  
  {
                  header.classList.remove('active')
              }
                  if (top &gt;= 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 &gt;= 150){
  
              header.classList.add('active')
  
          }else{
  
              header.classList.remove('active')
  
          }
  
              if (top &gt;= 500){
  
              tech.classList.add('tech')
  
          }else{
  
              tech.classList.remove('tech')
          }
          
      }
  }
  ```
  </code></pre>
  <p>If you look at my website that I have linked you will see that the word 'tech' sits at the top on the nav bar next to the logo, then when you scroll down a couple of pixels it goes away.</p>
  <p>I want it to be hidden until the page is scrolled down far enough for it to move from the top down to be next to the logo.</p>
  <p>I hope this makes sense! Any questions please ask, Thanks for any help you can provide me in advance!</p>
  <p>I usually work with css, javascript is new to me, I have got most things working right just this one part doesn't do what I want :/</p>