Stop jQuery function using screen width

Question

I am struggling with the following: I want to change the behaviour of my header, depending on the Screen width. It works just fine when going from small to big resolution. But the other way round the "ganzOben" and "inMitte" functions don't stop. Any Ideas?

$(document).load($(window).bind("resize", checkHeader));
$(document).ready(checkHeader ());
$(window).scroll(checkHeader ());

function checkHeader(){
    if (window.matchMedia('(min-width: 725px)').matches) {
            $(window).scroll(function ganzOben (){
                if($(document).scrollTop() <= 0) {
        /* CSS for Header Desktop Res TOP */
                }
            });
        var lastScrollTop = 0;
        $(window).scroll(function inMitte (event){
            var st = $(this).scrollTop();
            if (st > lastScrollTop){
        /* CSS for Header invisble by Downscolling */
            } else {
        /* CSS for Header visible by Upscolling */
            }
            lastScrollTop = st;
        });
    } else {
        $(window).scroll(function inMitte (event) {return false});
        $(window).scroll(function ganzOben () {return false});
        /* CSS for Header in mobile View */
    };
};

`

score 0 · Accepted Answer · answered Jul 04 '14 at 15:59

At the moment you're just adding new event handlers every time checkHeader is called.

You need to remove the event handlers: $(window).off('scroll');

Also I'm not quite sure why you set up two different handlers for the scroll event, one should be enough.

Stop jQuery function using screen width

1 Answers1