A way to determind the window size and turn javascript/jquery code on if true and off if not true
<p>I have been looking around, trying to figure out a way to turn on jquery code like media in css where it's based on the screen size.
<br>
I have seen several solutions/questions where they are asking for how to just one-time fire off, this is something I want to turn on as in normal, like make the jquery code available and used above 1024px and not just one time which</p>

<pre><code>if ( $( window ).width() &gt; 1024 )
</code></pre>

<p>will do, but I need it to like the media in css.</p>

<p>css example for what I'm thinking of but i would like it for javascript/jquery:</p>

<pre><code>&lt;link rel="stylesheet" type="text/css" media="screen and (min-width: 1024px)" href="style.css" /&gt;
</code></pre>

<p>I have this jquery code running and I want it to only be activated/turned on and works when the window size is above 1024px and turned off when the window size is below 1024px.
<br>
There's nothing wrong with the jquery code I'm just trying to explain my situation, as I can't figure out the keywords, and can't seem to find other questions with an answer.</p>

<p>EDIT:</p>

<p>As answers have been on, is this you want me to use, but it's only firing once it's resized, that's not what I am thinking of as it would be just duplicate.
<br>
But I want it to run like normally run, not one-time fire/call each time it's resized.
<br>
If i remove the resize and if statement, it's running as it should but i want it to only do that, once the screen size is above 1024px and keep running, is it possible? like with the hasclass("resize") on a certain div, i tried to put it on body, but it didn't quite work out.</p>

<pre><code>$( window ).resize( function ()
{
    if ( $( window ).width() &gt; 1024)
    {
        $( "#main-nav-box" ).click( function ()
        {
            $( "#main-nav-box" ).removeClass( "in" );
            $( "#main-nav-box" ).addClass( "clicked" );
            $( "#main-nav-box" ).removeClass( "scrolled" );
            $( "#main-nav-box-menu" ).removeClass( "in" );
            $( "#main-nav-box-menu" ).addClass( "open" );
            $( "#main-nav-box-menu" ).removeClass( "closed" );
            $( "#main-nav-box-menu-overlay" ).removeClass( "closed" );
            $( "#main-nav-box-menu-overlay" ).removeClass( "in" );
            $( "#main-nav-box-menu-overlay" ).addClass( "open" );
            setTimeout( function ()
            {
                $( "#main-nav-box" ).addClass( "in" );
                $( "#main-nav-box-menu" ).addClass( "in" );
                $( "#main-nav-box-menu-overlay" ).addClass( "in" );
            }, 250 );
        } );
        $( "#main-nav-box-menu-overlay" ).click( function ()
        {
            if ( $( window ).scrollTop() === 0 )
            {
                $( "#main-nav" ).removeClass( "in" );
                $( "#main-nav" ).removeClass( "scrolled" );
                $( "#main-nav" ).addClass( "scrolledtop" );
                $( "#main-nav-box" ).removeClass( "in" );
                $( "#main-nav-box" ).removeClass( "scrolled" );
                $( "#main-nav-box" ).addClass( "scrolledtop" );
                $( "#main-nav-box" ).removeClass( "clicked" );
                $( "#main-nav-box-menu" ).removeClass( "open" );
                $( "#main-nav-box-menu" ).removeClass( "in" );
                $( "#main-nav-box-menu" ).addClass( "closed" );
                $( "#main-nav-box-menu" ).addClass( "in" );
                $( "#main-nav-box-menu-overlay" ).removeClass( "open" );
                $( "#main-nav-box-menu-overlay" ).removeClass( "in" );
                $( "#main-nav-box-menu-overlay" ).addClass( "closed" );
                setTimeout( function ()
                {
                    $( "#main-nav" ).addClass( "in" );
                    $( "#main-nav-box" ).addClass( "in" );
                    $( "#main-nav-box-menu" ).addClass( "in" );
                    $( "#main-nav-box-menu-overlay" ).addClass( "in" );
                }, 250 );
            } else if ( $( window ).scrollTop() &gt; 0 &amp;&amp; $( window ).scrollTop() &gt; $( ".jumbotron" ).height() )
            {
                if ( !$( "#main-nav" ).hasClass( "scrolled" ) )
                {
                    $( "#main-nav" ).removeClass( "in" );
                }
                if ( !$( "#main-nav-box" ).hasClass( "scrolled" ) )
                {
                    $( "#main-nav-box" ).removeClass( "in" );
                }
                if ( !$( "#scrolltop" ).hasClass( "scrolled" ) )
                {
                    $( "#scrolltop" ).removeClass( "in" );
                }
                $( "#main-nav" ).addClass( "scrolled" );
                $( "#main-nav" ).removeClass( "scrolledtop" );
                $( "#main-nav-box" ).addClass( "scrolled" );
                $( "#main-nav-box" ).removeClass( "scrolledtop" );
                $( "#main-nav-box" ).removeClass( "clicked" );
                $( "#main-nav-box-menu" ).removeClass( "open" );
                $( "#main-nav-box-menu" ).removeClass( "in" );
                $( "#main-nav-box-menu" ).addClass( "closed" );
                $( "#main-nav-box-menu-overlay" ).removeClass( "open" );
                $( "#main-nav-box-menu-overlay" ).removeClass( "in" );
                $( "#main-nav-box-menu-overlay" ).addClass( "closed" );
                setTimeout( function ()
                {
                    $( "#main-nav" ).addClass( "in" );
                    $( "#main-nav-box" ).addClass( "in" );
                    $( "#main-nav-box-menu" ).addClass( "in" );
                    $( "#main-nav-box-menu-overlay" ).addClass( "in" );
                }, 250 );
            }
        } );


        if ( $( window ).scrollTop() === 0 || $( window ).scrollTop() &lt; $( ".jumbotron" ).height() )
        {
            if ( !$( "#main-nav" ).hasClass( "scrolledtop" ) )
            {
                $( "#main-nav" ).removeClass( "in" );
                $( "#main-nav" ).removeClass( "scrolled" );
                $( "#main-nav" ).addClass( "scrolledtop" );
            }
            $( "#main-nav-box" ).removeClass( "in" );
            $( "#main-nav-box" ).removeClass( "scrolled" );
            $( "#main-nav-box" ).addClass( "scrolledtop" );
            $( "#scrolltop" ).removeClass( "in" );
            $( "#scrolltop" ).removeClass( "scrolled" );
            $( "#scrolltop" ).addClass( "scrolledtop" );
            setTimeout( function ()
            {
                $( "#main-nav" ).addClass( "in" );
                $( "#main-nav-box" ).addClass( "in" );
                $( "#scrolltop" ).addClass( "in" );
            }, 250 );
        } else if ( $( window ).scrollTop() &gt; 0 &amp;&amp; $( window ).scrollTop() &gt; $( ".jumbotron" ).height() )
        {
            if ( !$( "#main-nav" ).hasClass( "scrolled" ) )
            {
                $( "#main-nav" ).removeClass( "in" );
            }
            if ( !$( "#main-nav-box" ).hasClass( "scrolled" ) )
            {
                $( "#main-nav-box" ).removeClass( "in" );
            }
            if ( !$( "#scrolltop" ).hasClass( "scrolled" ) )
            {
                $( "#scrolltop" ).removeClass( "in" );
            }
            $( "#main-nav" ).addClass( "scrolled" );
            $( "#main-nav" ).removeClass( "scrolledtop" );
            $( "#main-nav-box" ).addClass( "scrolled" );
            $( "#main-nav-box" ).removeClass( "scrolledtop" );
            $( "#main-nav-box" ).removeClass( "clicked" );
            $( "#scrolltop" ).addClass( "scrolled" );
            $( "#scrolltop" ).removeClass( "scrolledtop" );
            setTimeout( function ()
            {
                $( "#main-nav" ).addClass( "in" );
                $( "#main-nav-box" ).addClass( "in" );
                $( "#scrolltop" ).addClass( "in" );
            }, 250 );
        }

        $( window ).scroll( function ()
        {
            if ( !$( "#main-nav-box" ).hasClass( "clicked" ) )
            {
                if ( $( window ).scrollTop() === 0 )
                {
                    if ( !$( "#main-nav" ).hasClass( "scrolledtop" ) )
                    {
                        $( "#main-nav" ).removeClass( "in" );
                        $( "#main-nav" ).removeClass( "scrolled" );
                        $( "#main-nav" ).addClass( "scrolledtop" );
                    }
                    $( "#main-nav-box" ).removeClass( "in" );
                    $( "#main-nav-box" ).removeClass( "scrolled" );
                    $( "#main-nav-box" ).addClass( "scrolledtop" );
                    $( "#scrolltop" ).removeClass( "in" );
                    $( "#scrolltop" ).removeClass( "scrolled" );
                    $( "#scrolltop" ).addClass( "scrolledtop" );
                    setTimeout( function ()
                    {
                        $( "#main-nav" ).addClass( "in" );
                        $( "#main-nav-box" ).addClass( "in" );
                        $( "#scrolltop" ).addClass( "in" );
                    }, 250 );
                } else if ( $( window ).scrollTop() &gt; 0 &amp;&amp; $( window ).scrollTop() &gt; $( ".jumbotron" ).height() )
                {
                    if ( !$( "#main-nav" ).hasClass( "scrolled" ) )
                    {
                        $( "#main-nav" ).removeClass( "in" );
                    }
                    if ( !$( "#main-nav-box" ).hasClass( "scrolled" ) )
                    {
                        $( "#main-nav-box" ).removeClass( "in" );
                    }
                    if ( !$( "#scrolltop" ).hasClass( "scrolled" ) )
                    {
                        $( "#scrolltop" ).removeClass( "in" );
                    }
                    $( "#main-nav" ).addClass( "scrolled" );
                    $( "#main-nav" ).removeClass( "scrolledtop" );
                    $( "#main-nav-box" ).addClass( "scrolled" );
                    $( "#main-nav-box" ).removeClass( "scrolledtop" );
                    $( "#main-nav-box" ).removeClass( "clicked" );
                    $( "#scrolltop" ).addClass( "scrolled" );
                    $( "#scrolltop" ).removeClass( "scrolledtop" );
                    setTimeout( function ()
                    {
                        $( "#main-nav" ).addClass( "in" );
                        $( "#main-nav-box" ).addClass( "in" );
                        $( "#scrolltop" ).addClass( "in" );
                    }, 250 );
                }
            }
            if ( $( window ).scrollTop() === 0 )
            {
                $( "#scrolltop" ).removeClass( "in" );
                $( "#scrolltop" ).removeClass( "scrolled" );
                $( "#scrolltop" ).addClass( "scrolledtop" );
                setTimeout( function ()
                {
                    $( "#scrolltop" ).addClass( "in" );
                }, 250 );
            } else if ( $( window ).scrollTop() &gt; 0 &amp;&amp; $( window ).scrollTop() &gt; $( ".jumbotron" ).height() )
            {
                if ( !$( "#scrolltop" ).hasClass( "scrolled" ) )
                {
                    $( "#scrolltop" ).removeClass( "in" );
                }
                $( "#scrolltop" ).addClass( "scrolled" );
                $( "#scrolltop" ).removeClass( "scrolledtop" );
                setTimeout( function ()
                {
                    $( "#scrolltop" ).addClass( "in" );
                }, 250 );
            }
        } );
    }
} );
</code></pre>

<p>EDIT2:</p>

<p>Maybe this would help to understand it better
<a href="https://jsfiddle.net/xs22hw89/2/" rel="nofollow">JSFIDDLE</a></p>