如何复制这个半静态菜单

How to copy this semi-static menu?

本文关键字：静态 菜单 何复制 复制      更新时间：2023-09-26

我想复制这个页面上的功能:http://www.jetstar.com/sg/en/special-offers。具体来说，"预订航班"菜单的行为，它在页面加载时位于特定位置，但当用户向下滚动时，它会粘在页面顶部。

到目前为止，我不知道我是否应该寻找Javascript或CSS或什么，所以任何关于一般方法的指针都将非常有帮助。

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

在这种情况下，您可以使用Chrome中的"开发人员工具"(或其他浏览器中的类似工具)，例如查找如何工作的东西，你感兴趣的

例如:

  • 菜单项右键=>菜单为容器(div)，类别为.menu
  • 点击元素，显示css: margin-left: 0px; top: 0px; position: fixed; left: auto;处于"粘性"状态，margin-left: 0px; top: 76px; left: auto; position: absolute;处于非"粘性"状态

  • 在页面上检查脚本并搜索正确的函数(例如，通过"menu"或更好的"fixed"搜索)=>在"scroll .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' });
}

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

相关文章：