How can I set a javascript "if" conditional to activate based on mobile screen size?

Question

I have a javascript code which causes the header to scale on scroll. Currently, I am using this:

<script>
  var y = window.scrollY
  var hh = document.getElementById('header').offsetHeight
  var shrinkHeader = function(){
    console.log("y", window.scrollY)
    if(window.scrollY === 0){
      document.getElementById('header').style.height = '125px';
      document.getElementById('content').style.paddingTop = '125px';
      document.getElementById('header').classList.remove("small-image");
    }else{
      if(hh === 80){return;}else{
        document.getElementById('header').style.height = '70px';
        document.getElementById('content').style.paddingTop = '70px';
        document.getElementById('header').classList.add("small-image");
      }
    }
  }
  window.onload = shrinkHeader;
  window.onscroll = shrinkHeader;
</script>

I would like to modify so that the header initiates as shrunk on mobile. So that there is never a full size header when viewing on a window less than 768px.

I've tried adding this, however it did not work:

<script>
  var y = window.scrollY
  var hh = document.getElementById('header').offsetHeight
  var shrinkHeader = function(){
    console.log("y", window.scrollY)
    if(window.scrollY === 0 && $(window).width() > 768){
      document.getElementById('header').style.height = '125px';
      document.getElementById('content').style.paddingTop = '125px';
      document.getElementById('header').classList.remove("small-image");
    }else{
      if(hh === 80 || $(window).width() < 769){return;}else{
        document.getElementById('header').style.height = '70px';
        document.getElementById('content').style.paddingTop = '70px';
        document.getElementById('header').classList.add("small-image");
      }
    }
  }
  window.onload = shrinkHeader;
  window.onscroll = shrinkHeader;
</script>

Any help or redirection is appreciated.

Many thanks in advance.

Please read [ask], especially the section titled "Write a title that summarizes the problem". — Heretic Monkey, Jul 06 '23 at 17:39

score 1 · Accepted Answer · answered Jul 06 '23 at 20:33

1

Use Window: matchMedia() method
Example:

if ( window.matchMedia('(max-width: 768px)').matches ) {
  console.log('max-width: 767px');
} else {
  console.log('min-width: 768px');
}

answered Jul 06 '23 at 20:33

imhvost

4,750
2
8
10

Thank you so much! Works perfectly – thma23 Jul 06 '23 at 21:32

How can I set a javascript "if" conditional to activate based on mobile screen size?

1 Answers1