菜单固定在顶部，并在Scroll事件上显示动画

Question

对不起，伙计们，我对html，CSS的了解不够，所以我需要你的帮助。

HTML结构

滑块（顶部）

菜单（中间）

内容（底部）

我希望当我向下滚动时，菜单应该以平滑的动画显示在TOP上并保持固定在顶部，当我向上滚动时，Slider将可见，那么只有Menu应该位于其原始位置。

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

我想通过任何现成的js库或只需使用JQUERY建议你的帮助。

JSFIDDLE（在小提琴中，我使用简单的单张图像，但实际上我有滑块）

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();
      }
});