Question

我正在尝试复制此页面上的功能：http://www.jetstar.com/sg/en/special-offers。具体来说，“预订航班”菜单的行为，它位于页面加载的特定位置，但随着用户向下滚动，它会粘在页面顶部。

截至目前，我不知道我是否应该寻找Javascript或CSS或者什么，所以任何关于一般方法可能会有用的指示都会非常有用。

我知道这是一个非常糟糕的问题，但不幸的是，我根本不知道我不知道什么，也不知道如何提供更多细节。我只是在寻找正确方向的指针。

Answer 1

在这种情况下，您可以使用Chrome中的“开发者工具”（或其他浏览器中的类似工具），例如找到您感兴趣的工作方式。

例如在这种情况下：

菜单项上的右键=＆gt; menu是容器（div），类为.menu
点击元素并在“粘性”状态下显示css：margin-left: 0px; top: 0px; position: fixed; left: auto;，而在“粘性”状态下显示margin-left: 0px; top: 76px; left: auto; position: absolute;

在页面检查脚本并搜索正确的功能（例如，通过“菜单”或更好的“固定”搜索）=＆gt;在“scroller.js”中，您可以看到处理scroll事件的函数和：

 if (winTop > 213) {
     //Function call goes here
     $("#nav .menu:first").css({ position: 'fixed', top: '0px', left: 'auto' });
     $(".mateMail").css({ position: 'fixed', top: '248px', left: 'auto' });
}

Answer 2

通常的方法是这样的：绑定到窗口的scroll事件的处理程序; 检查处理程序中的scrollTop，当达到某个限制时，将静态定位的元素切换到position:fixed。然后在用户向上滚动页面时执行相反操作。

如何复制这个半静态菜单？

2 个答案: