How can I only let my header menu shrink when the screen size is larger than 700px by using javascript?

Question

So here's my website below: KaiNanfelt_Music

I tried to make my header(menu) shrink when scrolling, the whole codes looks like this:

So it works on all screen, but I want it to only work when the screen size is larger than 700px, what should I do with it and any suggestion? Thank you!

// When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    document.getElementById("menu").style.padding = "0px";
    document.getElementById("menu").style.margin = "0px 0px 0px 10px";
    document.getElementById("site-title").style.fontSize = "3.5em";
    document.getElementById("site-title").style.float = "left";
    document.getElementById("site-title").style.margin = "20px 0 10px 0";
    document.getElementsByClassName("menu").style.float = "right";
  } else {
    document.getElementById("menu").style.padding = "10px";
    document.getElementById("site-title").style.fontSize = "6.8em";
    document.getElementById("site-title").style.float = "none";
  }
}

#menu {
  transition: 0.5s;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 200;
  overflow: hidden;
  background: #ffffff;
  ;
}

<nav id="menu">
  <button class="nav-button">Toggle Navigation</button>
  <div id="site-title">
    <a href="#" title="home" rel="home">
      Home
    </a>
  </div>
</nav>

Answer 1

CSS where you can
Why not doing it in CSS ? JavaScript should not do styling in the first place, but well, you can do it if you like. I don't recommend it. If you can do it in CSS , then it is definitely the best way. The problem that we face here is, that we cannot track the scroll position without JavaScript . Therefore, this part must be in JavaScript .

Horizontal maximum
You can use the @media query in CSS for this part. You can also set or unset the classes in javascript (if you need to toggle it for example).

Scrolling
Please have a look at this post here: media query for vertical scroll
It also explains, what I had in mind. The call is expensive because it will call the onScroll-function over and over non-stop. But he has also a solution to that. I forked a solution based on this post.

 var nav = document.querySelector(".your-nav"); var timeout_debounce; window.addEventListener("scroll", debounce); function debounce(event) { if (timeout_debounce) { return; } timeout_debounce = setTimeout(clearDebounce, 100); actualCallback(event); } function clearDebounce() { timeout_debounce = null; } function actualCallback(event) { if (window.pageYOffset >= 80) { nav.classList.add('scrolled'); } else { nav.classList.remove('scrolled'); } }

 body { max-height: 500px; overflow: scroll; }.get-smaller { box-sizing: border-box; width: 200px; height: 200px; padding: 10px; background-color: tomato; color: white; }.your-nav { text-align: center; margin-bottom: 100vh; }.your-nav.scrolled ul { background: purple; }.your-nav ul { width: 300px; margin: 0px auto; padding: 0px; list-style: none; background: wheat; }.your-nav li { display: inline-block; width: 50px; padding: 0px; margin: 0px; }.your-nav li:last-child() { background: red; } @media screen and (min-width: 700px) {.get-smaller { width: 100%; }.your-nav ul { width: 100%; height: auto; } }

 <div class="get-smaller"> <span>I will get smaller if the viewport is smaller than 700px</span> </div> <nav class="your-nav"> <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> </nav>

Answer 2

Use documentElement with clientWidth inside a conditional statement to see if the screen width is larger than 700, if it is, run your function...

NOTE: I used 600 pixels in my example as the viewport in the snippit is lower than 700

 var viewportWidth = window.innerWidth || document.documentElement.clientWidth; console.log('current viewport: ' + viewportWidth) window.onscroll = function() { if (viewportWidth > 600) { //<-- console.log just to illustrate that the sizing works, resize your screen and test console.log(' Window is larger than 600 px'); // run your scrollFunction() } };

 <!--Force a scroll using break tags for testing--><br> 'view in full screen'<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>