Remove jQuery function on screen resize

Question

I've created a jQuery function to show a div that should work just when the screen size is more than 1000px.

The function works properly but it doesn't work when I resize the screen because the jQuery function has already been loaded. So when I resize the screen, the function keeps staying there.

Is there a way to remove this script once I resized the screen and it is smaller than 1000px?

At the moment the script works just when I open the webpage and the screen is already smaller than 1000px but not when I resize the screen

This is what I have now.

jQuery(document).ready(function() {
    jQuery(window).resize(function() {
        if(jQuery(window).width() >= 1000) {

          jQuery("#mega-menu-projects").mouseover(
              function(){
                  jQuery("#mega-menu-projects").show();
              }
          );

          jQuery("#mega-menu-projects").mouseout(
              function(){
                  jQuery("#mega-menu-projects").hide();
              }
          );

        }
    }).resize();
});

Answer 1

You can do it using CSS @media

#mega-menu-projects{
  display:none;
}

@media screen and (min-width: 1000px) {
  #mega-menu-projects{
    display:block;
  }
}