菜单固定在顶部，并在 Scroll 事件上设置动画答案

【问题标题】：Menu fixed on top with animate on Scroll event菜单固定在顶部，并在 Scroll 事件上设置动画
【发布时间】：2014-05-13 20:09:06
【问题描述】：

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

HTML结构是

滑块（在顶部）

菜单（中）

内容（底部）

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

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

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

JSFIDDLE（在 js fiddle 中我使用了简单的单张图片，但实际上我有滑块）

【问题讨论】：

标签： html css jquery-animate

【解决方案1】：

这个FIDDLE 会给你一个开始。

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

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

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

【讨论】：

您能给我举一些仅用于滚动事件的示例吗？如果是的话，对我有很大的帮助。
“滚动事件”是什么意思。您的示例页面不会“滚动”它只使用向上和向下箭头
不，它在滚动。如果我向下滚动，滑块隐藏并且菜单动画到顶部，当滚动值为零时，菜单转到底部并且滑块也将显示与chanel.com/en_US
您的“时尚链接”仅使用箭头。你的小提琴有一个滚动条，但没有 javascript，所以没有自动滚动功能。您需要更具体地提出您的问题，以及您希望它如何工作。