Как фиксированному элементу при достижения верхней границы определенного элемента добавить класс?

Question

[Tigronix]

Всем привет и заранее спасибо за ответы.
Обьясню более подробно, что я имею в виду.
Есть фиксированный по дефолту хедер и есть просто футер. Когда нижняя граница хедер соприкасается с верхней границей футера, то хедеру нужно добавить класс. (А там уже с помощью ксс сделать его не фиксированным и получится, что он будет над футером) И если скроллить дальше, т.е. до конца страницы этот добавленный класс должен оставаться, чтобы не стать снова фиксированным.
Но, когда скроллим снова вверх страницы и границы перестали соприкасаться класс должен убираться.
Я пробывал разные способы связанные с scrolltop, offset, height.
Вот пример моих нелепых набросков. Такое чувство, что ответ рядом и совсем не сложный, но никак не могу допереть.

//header-scroll
    var header = $('.header');
    $(window).scroll(function(){
        var top = $(this).scrollTop();
        var footer =$('footer').outerHeight()
        console.log(footer);

        if (top => footer) {
            header.addClass('unfixed');

        } else {
            header.removeClass('unfixed');
        }
    });

Answer 1

[iBird Rose]

var Elem = $('ваш элемент').offset().top;

$(window).scroll(function(){
    if ($(this).scrollTop() > Elem ) { ...}
});

Comments

[Tigronix]

Я что-то не так делаю? Класс не вешается...
https://jsfiddle.net/1hwxpwup/25/

[iBird Rose]

Tigronix: потому что ты не доходишь до футера. и марджином высоту не указывай. https://jsfiddle.net/1hwxpwup/26/

[Tigronix]

iBird Rose: Еще отнял высоту футера и получилось, что нужно. Спасибо.
https://jsfiddle.net/1hwxpwup/27/