Media queries combined with Javascript?

Question

I have a sticky sidebar that sits at the top of the window as the user scrolls down the page.

It works fine at desktop size, but when resizing the screen to tablet size (@media only screen and (min-width: 768px) and (max-width: 959px) ) it no longer sticks...

Do I have to add the media query to my Javascript?

You can see the project here at http://v3.edharrisondesign.com/project/

    $('#sticky').scrollToFixed({
        marginTop: 20,
        limit: function() {
            var limit = $('#foot').offset().top - $('#sticky').outerHeight(true) - 100;
            return limit;
        },
        minWidth: 1000,
        zIndex: 999,
        fixed: function() {  },
    });

    $('#sticky').bind('unfixed', function() {
        console.log('sticky preUnfixed');
    });
    $('#sticky').bind('unfixed', function() {
        console.log('sticky unfixed');
        $(this).css('color', '');
    });
    $('#sticky').bind('fixed', function() {
        console.log('sticky fixed');
        $(this).css('opacity', '1');
    });
});

bigspotteddog bigspotteddog · Accepted Answer · 2012-09-04T21:28:30

You've got the minWidth property set to 1000 on #sticky. This means the window width must be at least 1000px wide; otherwise, it will turn itself off. Remove that, or make it small enough to fit the desired dimensions, and it should work.

In other words, make it this:

$('#sticky').scrollToFixed({
    marginTop: 20,
    limit: function() {
        var limit = $('#foot').offset().top - $('#sticky').outerHeight(true) - 100;
        return limit;
    },
    minWidth: 768,
    zIndex: 999,
    fixed: function() {  },
});

Media queries combined with Javascript?

1 Answers