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

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

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

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

Код:

<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);
   // я совершенно не понимаю синтаксис, делал много попыток, но не получается
  });
});