jQuery: Disable script based on window width/media query

Question

I have the jQuery script below that triggers a div to become floating-fixed. (Which is working and I have no problems with it).

$(document).ready(function() {
    ctop = $('#comment').offset().top - parseFloat($('#comment').css('margin-top').replace(/auto/, 0));
});
$(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();
    var abottom = $('#individual_second_tier').offset().top - parseFloat($('#individual_second_tier').css('margin-top').replace(/auto/, 0));

    // whether that's below the form
    if (y >= ctop) {
        // if so, ad the fixed class
        $('#comment').addClass('fixed');
        if (y > abottom-$('#comment').height()){
            $('#comment').offset({'top': abottom-$('#comment').height()-y});
        }
        else
        {
            $('#comment').offset({'top': 0 });
        }
    } else {
        // otherwise remove it
        $('#comment').removeClass('fixed');
    }
    var newWidth = $('#comment').parent().width();
    $('#comment').width(newWidth);

    });

You can see it in action here. It's the gray box on the right that says "Poll"

My site is responsive so when it goes under 768 pixels, the poll div moves down under the blog content. So in full browser width the script works great, but when I resize it the poll div goes haywire.

I am complete noob when it comes to jQuery -- I am an excellent copy-paster -- but I am imagining that there is a fancy way in the existing script to instruct it to disable it when it matches a media query or browser width, so that I can get rid of the fixed-floating-div functionality.

If anyone wants a local copy to mess with, here is a zip file with the html file (type will look off as I am using webfonts).

Answer 1

Can you not just force the position of the poll to relative, rather than fixed at a designated screen size using media queries?

@media (min-width: 768) {
    #comment { 
        position: relative !important; 
        top: 0 !important; 
    }
}

Or, you could use jQuery within your function

if ($(window).width() > 768) { 
    $('#comment').removeClass('fixed');
}

Answer 2

A fellow without a Stack Overflow account saw my question and provided the answer by e-mail. It's a deceivingly simple solution. Simply adding to the existing code:

if ($(window).width() > 768) {

The final block of code looks like this:

$(document).ready(function() {
    ctop = $('#comment').offset().top - parseFloat($('#comment').css('margin-top').replace(/auto/, 0));
});
$(window).scroll(function (event) {

    if ($(window).width() > 768) {

        // what the y position of the scroll is
        var y = $(this).scrollTop();
        var abottom = $('#individual_second_tier').offset().top - parseFloat($('#individual_second_tier').css('margin-top').replace(/auto/, 0));

        // whether that's below the form
        if (y >= ctop) {
            // if so, ad the fixed class
            $('#comment').addClass('fixed');
            if (y > abottom-$('#comment').height()){
                $('#comment').offset({'top': abottom-$('#comment').height()-y});
            }
            else
            {
                $('#comment').offset({'top': 0 });
            }
        } else {
            // otherwise remove it
            $('#comment').removeClass('fixed');
        }
        var newWidth = $('#comment').parent().width();
        $('#comment').width(newWidth);
    }
});

I tested all the other answers provided here, but none worked the right way. Many thanks, though, for your help.