固定/粘性/浮动顶部菜单导航栏的正确名称 [关闭]

Posted 2023-02-27

【中文标题】固定/粘性/浮动顶部菜单导航栏的正确名称 [关闭]

【英文标题】：Correct name for fixed/sticky/floating top menu nav bar thingy [closed]

【发布时间】：2014-08-10 20:28:22

【问题描述】：

当您向下滚动页面并且菜单栏出现在顶部（可能在其他地方）并停留在那里（固定<div>）时，最正确的是什么 这个术语？如果您不知道我在说什么元素，请参阅 Example1 或 Example2 或 Example3

我见过它有几个不同的术语：

粘性菜单 粘性工具栏 浮动菜单 浮动导航栏 顶部菜单 顶部菜单栏 固定导航栏 固定菜单 太棒了

但真的，它叫什么？？拜托，不要给我“个人喜好”的废话——我需要一些真正的肉。让我们提出一些可能性，浏览我们的选项，并修正一个坚持的观点。 ;-)

致编辑：这是一个话题，因为我正在尝试以语义方式进行编码——我到底在我的类名和变量名中使用什么？

【参考方案1】：

这真的取决于你用它做什么。

浮动

如果栏被设置样式或以其他方式编程以保持在特定媒体上的特定位置，即使当您滚动离开它时，它也被称为浮动。否则，如果你想显式，它可能被称为“静态”。

上、下、左、右

不管它是否漂浮，它可能是这些中的任何一个......甚至在你的视野中间拍打......虽然，那会很尴尬......

控制或导航

该栏是否包含划分为层次结构的链接的分类列表？如果是这样，那么这是一个导航栏。它是否包含搜索框或其他选项？如果是这样，那么它就是一个控制栏，即使它也有导航元素。

栏或菜单

如果它从可视区域的最大或最突出部分的左侧延伸到该区域的右侧，或者从该区域的顶部到底部，并且占据不到一半该区域，无论是<div>，还是其他。如果它没有延伸到整个长度或至少有很大一部分，您可能需要使用“菜单”而不是栏。

因此，如果您有一个仅包含链接或下拉菜单的栏，其中包含指向您网站不同部分的链接，定位为浮动在顶部，那么它将是“浮动顶部导航栏”。

如果您有一个带有搜索框、收音机和链接的左侧栏，当您滚动时它不会浮动，它将是“静态左控制栏”或只是“左控制栏”。如果它没有延伸到元素侧面的一半以上，我更倾向于将其称为“左控制菜单”

您的用户不会关心您如何称呼它，但任何维护您的代码的人至少会知道您要做什么。

【讨论】：

如果更多的人会像您所概述的那样谨慎地用词，世界会变得更美好。很好的答案。

【参考方案2】：

它们都是固定导航栏，但是它们的行为有点不同，我想这些就是你要问的。

粘性

当你向下滚动页面时它会发生一些变化，它会在顶部变成“浮动”，并带有 z-index 属性。

浮动

它始终以 z-index 属性浮动在顶部，这意味着即使在最顶部滚动，正文内容也在栏下方。

已修复

始终位于顶部，向下滚动时不会更改。