adjust jQuery option via CSS media query

Question

i've looked through quite a few jQuery / CSS answers but none seem to touch on my problem _ i used popin.js to create a popin at the bottom of a webpage which appears after the user scrolls down past 500px _ everything works as it should for large screen but i need to know how to reset the height for smaller screens and whether it's possible via a media query_ say '@media(max-width: 768px)'

the code from the popin.js library =

var settings = $.extend({
            target      : '[data-toggle="popin"]', // Target element
            button      : '[data-toggle="kill-popin"]', // Close Button
            store       : 'popin', // Cookie Name
            offsetTop   : 500, // Offset when to slide
            duration    : 400 // Speed of animation
        }, options);

how do i change the offsetTop option for @media(max-width: 768px)

thanks in advance

Answer 1

ok here is the answer https://jsfiddle.net/qtsk1zwu/2/

var offsetVal = 0;
$(window).on('resize',function(){
  if($(window).width() <=768){
    offsetVal = 200
      console.log(offsetVal)
  }else{
   offsetVal = 500
     console.log(offsetVal)
  }

})
$(window).on('load',function(){
  if($(window).width <=768){
    offsetVal = 200
      console.log(offsetVal)
  }else{
   offsetVal = 500
     console.log(offsetVal)
  }

})