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
});