Динамичный хеадер и animate по прокрутке

[Vadya]

Опять нужна ваша помощь, напоминаю, я слабоват

Хочу сделать анимированную шапку сайта. Чтобы при прокрутке страницы вниз блок шапки "уезжал" частично (на заданное количество пикселей) вверх за пределы окна, а при прокрутке страницы в исходную позицию возвращался обратно.

Для наглядности напишу вопрос в коде

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header2" style="height:100px;border:solid red 1px;position:fixed;background-color:#fff;">HEADER</div>

<div style="position: absolute; height:3000px;">BODY</div>

jQuery(function(f) {
  var element = f('#header2');
  f(window).scroll(function() {

    //Строка ниже работает правильно, но с другим эффектом. Но тут, конечно, все проще, по условию выбирается имя функции, при скроле вниз/вверх блок плавно исчезает и появляется
    //element['fade'+ (f(this).scrollTop() > 10 ? 'Out': 'In')](500);

    //А мне надо по условию присваивать блоку top в функции animate
    //Пытаюсь как-то так, но ничего не получается:
    animate({top:f(this).scrollTop() > 10 ? '-30px' : '0px'}, 200);
   // я совершенно не понимаю синтаксис, делал много попыток, но не получается
  });
});

[рони]

Vadya,
строка 10

element.stop().animate({top:f(this).scrollTop() > 10 ? '-30px' : '0px'}, 200);

[Vadya]

рони, Спасибо, работает. Плюс не разрешает нажать, слишком часто вы помогаете )

Если вдруг с поиска кто заглянет, понадобится этот плагин, чтобы не было рывков в анимации: http://ricostacruz.com/jquery.transit/