尝试创建响应滚动粘滞菜单

Question

我试图在Dreamweaver中创建一个响应式网站，其中包含一个标题和菜单，最初会滚动然后粘贴到页面顶部。

标题和菜单需要滚动固定英雄图片的顶部。 此英雄图像无法定义为背景，因为它将由flexslider脚本提供动力，以便在设定的时间后更改图像。

我还希望粘性标题在到达页面顶部时可能会缩小高度，以减少占用的屏幕空间量。

我在网上发现了一些粘性菜单示例，有些似乎有令人烦恼的特性，菜单直接位于屏幕顶部的位置后面菜单后面的内容消失了。我想避免这种情况。

Please find a Mock-up of what I'm looking for here

显然，以上所有内容都不能在移动设备上接受。 因此，对于手机，标题需要滚动，只留下一个汉堡包样式菜单固定在屏幕顶部。

我已经在网上找到了一些我需要的元素的例子，但还没有把所有东西都结合起来。 我尝试过剪切和粘贴来自不同来源的代码，但还没有达到预期的效果。

我不知道我要求的内容是否可行，但如果有人能指出我如何实现这一目标（或改进我正在寻找的内容），我将不胜感激）。

由于

Neil White

Answer 1

使用此JS

http://stickyjs.com/

它将类粘贴到您想要粘贴到顶部的元素上。因此，您可以在css中为is-sticky类添加高度。根据您的要求，当元素达到顶部时，它将减少或增加元素的高度。