Аnimate по условию, синтаксический вопрос

219

02 апреля 2017, 03:44

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

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

jQuery(function(f) { 
  var element = f('#header2'); 
  f(window).scroll(function() { 
    //Вот так все правильно работает, но это не тот эффект, который мне нужен 
    //element['fade'+ (f(this).scrollTop() > 10 ? 'Out': 'In')](500); 
 
    //Пытаюсь как-то так, но не могу параметры смещения завернуть в условие 
    //В исходную позицию шапка, конечно, не возвращается. Помогите с синтаксисом 
    //element['animate'+ (f(this).scrollTop() > 10 ? '': '')]({top:"-30"},200); 
 
  }); 
});

<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>

Answer 1

jQuery(function(f){ 
var element = f('#head'); 
f(window).scroll(function(){ 
element.stop().animate({top:f(this).scrollTop() > 5 ? '-50px' : '0px'}, 80);                 
}); 
});