导航是具有出色设计的优质WordPress网站的重要方面。因此，值得花一些时间来考虑您网站的访问者如何通过您的导航与您的页面进行交互。一种方法是使用浮动固定栏（固定页眉）。 这是您网站的header部分在用户滚动时保持在屏幕顶部的位置。这提供了无数的好处，但主要优点之一是您的导航元素保持在用户的视线范围内，无论它们在页面上的什么位置。仅出于这个原因，浮动固定栏是一个受欢迎的用户界面 (UI) 元素。 在本教程中，我们将向您展示如何在WordPress中创建浮动固定栏。它将涵盖很多方面，例如网络上的示例、可以帮助您的WordPress插件以及如何开发自己的浮动固定栏的指南。不过，首先让我们更详细地讨论一下什么是浮动固定栏。 什么是浮动固定栏 网络上的浮动固定栏示例 为什么使用浮动固定栏 浮动固定栏插件推荐 如何在WordPress中创建浮动固定栏 浮动固定栏使用技巧 什么是浮动固定栏 Kotaku网站的浮动固定栏 您网站的header页眉部分有点像您网站的信息台。这将是大多数用户首先会发现的东西，并且总是会在他们检查以找出一些关键信息并执行某些操作的地方： 例如，您的徽标或网站名称将出现在此处，作为用户的基础。在大多数情况下，他们将能够通过单击徽标返回主页。 如果您在网站上运行用户帐户，header通常会提供一个链接以登录这些帐户和个人资料页面。 这里可能有搜索功能，特别是如果您有一个大型网站，在不同区域有很多内容。 当然，您网站的导航也是页眉不可分割的一部分。 总体而言，您的header是用户的接触点。您会发现它通常是F形阅读模式的“条形图” ，因此它在直观的层面上引起了用户的注意。 您可能已经知道了什么是浮动固定栏，即使在直观意义上也是如此。当您滚动时，它是您网站的页眉部分“固定”到屏幕顶部的位置。与在滚动时保持原位并消失的静态页眉相比，固定页眉是始终可见的元素。 虽然浮动固定栏的典型方法是将其静态版本固定到屏幕顶部，但有几种不同的方法可以使其更可用、屏幕效率更高和动态。接下来，我们将看一些现实世界的例子。 网络上的浮动固定栏示例 您会在整个网络上找到浮动固定栏，最好检查一些以了解您可以实现的范围。周围最基本的例子之一是来自Hammerhead。该站点使用“弹出菜单”和浮动固定栏，并且很简单：它致力于在其静态布局中固定在页面顶部： Hammerhead网站上的浮动固定栏 另一个简单的实现来自Kin。这使用了一个典型的浮动固定栏，但这次有一些很酷的设计元素。 您会注意到对比度会根据您滚动浏览的网站部分而变化，并且还有一些不错的过渡效果： Kin网站上的浮动固定栏 这一次，当您向下滚动页面时，您会看到页眉消失。但是，当您向上滚动时，它会重新出现——您可以将其称为“部分持久页眉”。 这里的前提是向下滚动意味着您将时间投入到页面本身，因此可能不需要导航、登录页面或前往其他地方。但是，在您向上滚动时，您更有可能想要前往网站上的另一个页面。在这里，将显示浮动固定栏以节省时间。 正是这些小小的用户体验 (UX) 触动使网站访问者想要返回。对于您自己的固定栏设计，您需要考虑如何制作一个专注于访问者需求的UX和UI。 为什么你应该为你的网站使用浮动固定栏 许多网站都使用浮动固定栏，并且有很多充分的理由说明这种情况。它们可能是您整体网站体验的关键部分，并且对您的用户体验和用户界面有很大影响。 鉴于您将包含在header中的元素是用户始终想要访问的元素，因此始终显示它们是有意义的。对于小屏幕设备和格式尤其如此。 虽然当视口空间非常宝贵时，拥有一个“永远在线”的页眉似乎违反直觉，但这只是一个小小的牺牲。真正的好处是减少了移动用户滚动的理由——这在较小的设备上是必需的。如果您无需滚动即可提供站点导航，则用户可以更轻松地在您的站点中移动。 浮动固定栏的优点和缺点 我们介绍了浮动固定栏的一些优点，所以让我们快速总结一下： 您可以提供用户可以随时访问的导航，这有助于保持您网站上的自然阅读模式。 您可以使header适应不同的需求，例如对比、配色方案，甚至是用户意图。 有机会为用户提供价值，无论是桌面还是小屏幕。 但是，浮动固定栏并不是增加用户体验的灵丹妙药，使用它们也有一些缺点： 我们简要介绍了这一点，但对于各种尺寸的屏幕，您需要为header分配空间。 固定页眉自然会从您的其余内容中脱颖而出，因为它自己的元素会将视线从页面主体上移开。 有更多的开发工作涉及到一个好的固定header，因为您需要实现它，确保它在不同的浏览器中工作，并在较小的屏幕上检查它是否存在错误。 但是，如果您考虑您的设计选择、用户需求和站点目标，您可以减轻或消除所有这些缺点，同时保留优点。一种方法是通过WordPress插件。 浮动固定栏插件推荐 在接下来的几节中，我们将展示一些领先的 WordPress浮动固定栏插件。稍后，我们将讨论这种解决方案是否适合您。无论如何，插件可以帮助您实现功能而无需代码，如果您的主题不包含它，这很有价值。 更重要的是，您可以通过插件利用专家的设计和开发经验。开发人员将为您做出一些更重要的技术选择，并将其包装在一个直观且易于使用的UI中。 1. Sticky Menu & […]
