Question

I have a floating header and it shows with the following code:

$(window).scroll(function () {
        if ($(this).scrollTop() > 200) {
            $('#floatingHeader').show();
        } else {
            $('#floatingHeader').hide();
        }
    });

In this floating header I have a filter drop down – when I am half way down the page I use the filter – I filter the results to 1 row of results and the page gets smaller – but the above scrip doesn’t get executed – it only works when you scroll – how do I make the floating header not show when the page gets smaller without scrolling??

Answer 1

Use bind and the event names.

$(window).bind("scroll resize", function () {...

http://jsfiddle.net/ZATNp/