Can I execute javascript based on window size?

Question

I have a responsive site where I'm using a javascript to create a sticky sidebar.

I'm also using media queries to change from a multi-column layout to a single-column layout when the browser size is less than 768px.

I need to figure out how to disable the sticky menu script in the single-column layout. Essentially, I need something like a media query for the script statement.

This is the code I'm using to enable the script:

<script>
jQuery('#info').containedStickyScroll({
        duration: 0,
        unstick: false
    });
</script>

Is there something I can add to it to only have it trigger if the window is 768px wide or wider?

EDIT: I'm looking for a solution that will work if the user resizes the window on the fly.

Answer 1

Try this.

$(function(){
     $(window).resize(function(){
         if($(this).width() >= 768){
             jQuery('#info').containedStickyScroll({
                 duration: 0,
                 unstick: false
             });
         }
      })
      .resize();//trigger resize on page load
});

Answer 2

Try this code:

var height = $(window).height(); //I'm assuming you mean height, you can try .width() if yo u need it

if (height < 768) {
  jQuery('#info').containedStickyScroll({
      duration: 0,
      unstick: false
  });
}

Hope that helps.

Answer 3

Check this out:

var targetWidth = 768;
if ( $(window).width() >= targetWidth) {     
  //Add your javascript for screens wider than or equal to 768 here
  jQuery('#info').containedStickyScroll({
      duration: 0,
      unstick: false
  });
}
else {
  //Add your javascript for screens smaller than 768 here
  console.log(`am less than ${targetWidth}`)
}