Adding a listener to remove scroll function if width < x
<p>I have this css style set up to remove the sidebar behaviour on <code>#sidebox</code> when the screen gets smaller than 1024px in width. Also it gets replaced to its original location where it serves as a normal div within the content, hence the: 'position: relative'.</p>

<pre><code>@media screen and (max-width: 1024px) {
    #sidebox {
        position: relative;
        top: 0;
        right: 0;
    }
}
</code></pre>

<p>The next step<i>(This is what I need help with)</i> is to remove the JQuery script that makes <code>#sidebox</code> scroll to the top when it gets below a certain height, but still let it behave that way when the screen is larger than 1024px.<br /><br />
So when resizing the screen over 1024px <code>#sidebox</code> should scroll to the top. This behaviour is known as 'following'.<br /><br />
Below is the JQuery script I have set up to accomplish what is stated above:</p>

<pre><code>if ($(window).width() &gt; 1024) {
    $(window).scroll(function () {
        $("#sidebox").css("top", Math.max(0, 120 - $(this).scrollTop()));
    });
}

$(window).resize(function() {
    if ($(window).width() &gt; 1024) {
        $("#sidebox").css("top", Math.max(0, 120 - $(this).scrollTop()));
    } else {
        $("#sidebox").css("top"), 0;
    }
});
</code></pre>

<p>So how can I help you ask? Well, as you might have guessed it, the behaviour is flawed.
<br /><code>#sidebox</code><i>(in css)</i> <code>&lt;div id="sidebox"&gt;...&lt;/div&gt;</code><i>(in html)</i> does only behave desirably if the site is refreshed.<br /><br />
It appears that <code>$(window).resize</code> is not functioning as a listener for resizing.
<br/><br />
So when my window is 1920px in width and I open the site the sidebar will function as desired, but when I resize my window to a width lower than 1024px it will go to its proper location because of the css seen above, but still try to scroll, because <code>$(window).resize</code> does not function as I wish it to.</p>
