html - 菜单固定在顶部，滚动事件上有动画

Question

抱歉各位，我对 html、CSS 的了解不够，所以我需要你们的帮助。

HTML结构是

slider (在顶部)

菜单(中)

内容(底部)

我希望当我向下滚动时，菜单应该以流畅的动画出现在顶部并保持固定在顶部，而当我向上滚动时， slider 将可见，那么只有菜单应该出现在它原来的位置。

简而言之，我想要像 Example link 这样的动画 slider .我有相同的 HTML 结构。但我不明白它是如何工作的。

我想通过任何现成的 js 库或简单地建议使用 JQUERY 来获得帮助。

JSFIDDLE (在 js fiddle 中我使用了简单的单个图像，但实际上我有 slider )

Answer 1

这FIDDLE会给你一个开始。

将光标移动到图像窗口，然后使用向上和向下箭头。

有数百种方法可以让你做你想做的事。这个很不雅观。

JS

$('.lowerscreen').hide();

$( document ).keydown(function( event ) {
  if ( event.which == 38 )
     {
      $('.lowerscreen').hide('slow');
      $('.upperscreen').show('slow');
      event.preventDefault();
      }
});
$( document ).keydown(function( event ) {
  if ( event.which == 40 )
     {
      $('.lowerscreen').show('slow');
      $('.upperscreen').hide('slow');
      event.preventDefault();
      }
});