I want to make an animated site header. So that when scrolling down the page, the header for a specified number of pixels would “go” up, and when the page returns to its original position, the header is returned.

For clarity, I will write a question in the code

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>

  • what string do you want to collect? in the first case, you get either fade in or fade out, and in the second, what do you want to get? - Grundy
  • Second line The fact that the first line simply collects the function names is understandable. And I want the animate to be executed with different parameters by the condition scrollTop ()> 10 - Vadim
  • no, I meant: what should the new line look like? - Grundy
  • The fact of the matter is that I do not know, I completely do not understand the syntax. Now I will try more clearly. In the first version, where the fade in and out scrolls down the page, the block disappears, and when scrolling up it appears, but I need another animation using animate. To block left up and come back down. But with animate, the variant as with fade will not pass. There you should not just stupidly change the name of the function, but assign the parameters (styles) when scrolling. So I do not know how to do it. - Vadim
  • Ie something like if (scrolled> 10px) {animate ({top: "- 30"}, 200)} else {animate ({top: "0"}, 200)} - Vadim

1 answer 1

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