Как сделать прилипающий блок при прокрутке страницы с опозданием и анимацией?

Question

[0348raven]

Есть сайдбар слева при скролле он должен стать прилипающим - это просто здесь вопросов нет.

Блок должен анимироваться при скролее на свою прилипающую позицию - здесь тоже все вышло, путем

if($(this).scrollTop() > 150){

            $('#fixed').animate({
                top: "+75"
            }, 1000, function() {
                // Animation complete.
            });
        }

Теперь мне желательно вернуть это при скролле вверх в первоначальное положение, так как блок у меня будет оставаться "+75px". Пробовал вешать возврат на else - ничего не вышло, анимация либо тупит, либо вообще не срабатывает.

Для полного понимания предоставляю полный JS (правда без вышеупомянутого else, так как я понял, что это не вариант), который у меня это выполняет все вышепречисленные действия.

$(window).scroll(function () {

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

        if($(this).scrollTop() > 150){

            $('#fixed').animate({
                top: "+75"
            }, 1000, function() {
                // Animation complete.
            });
        }

    };



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

        if($(this).scrollTop() > 150){

            $('.menu-scroll').removeClass('menu-scroll').addClass('menu--fix');

        }else{

            $('.menu--fix').removeClass('menu--fix').addClass('menu-scroll');

        }

    };

});

Answer 1

[Marina]

Для ваших целей достаточно добавлять и убирать класс сайдбару, а анимацию оставлять за CSS.
Набросала грубо пример тут: jsfiddle.net/ashuh0k0

Comments

[0348raven]

Cпособ хороший, но анимация немного не та. Так я пробовал с помощью css.
Надеюсь найду решение.