Material Design实现悬停标题栏遇到的问题及解决方法-JavaScript中文网-JavaScript教程资源分享门户

Material Design 是一套由Google提出的设计规范，旨在统一移动端和Web端界面的外观和行为。其中包括悬浮标题栏的设计，在页面滚动时固定在屏幕顶部并保持可见。在实现过程中，我们可能会遇到以下问题，并提供解决方案。

问题1：页面跳动

在实现悬浮标题栏的过程中，我们会给标题栏设置fixed位置，这意味着它会脱离文档流。如果网页内容高度不够，或者使用了异步加载数据的情况下，当浏览器计算视口高度和元素位置时，页面会发生跳动。

解决方式：

使用placeholder撑开高度

为避免页面跳动，可以使用一个隐藏的占位符_placeholder_来撑开标题栏的高度，从而避免标题栏迅速离开文档流，代码如下：

-- -------------------- ---- -------
--- -
  --------- ------
  ---- --
  ----- --
  ------ --
  -------- ----
  --------- -
    -------- ---
    -------- ------
    ------- --------------- ----------------- --
  -
-

使用JavaScript处理

当页面内容不能确定时，我们可以使用JavaScript动态设置标题栏的高度：

const header = document.querySelector('header');
const placeholder = document.createElement('div');
placeholder.style.height = `${header.offsetHeight}px`;
header.parentElement.insertBefore(placeholder, header);

通过这种方法，我们可以使用JavaScript在标题栏前创建一个占位符，并将其高度设置为标题栏的高度。

问题2：遮挡内容

当标题栏被固定在屏幕顶部时，可能会导致某些内容被遮挡。

解决方式：

添加额外的空间

我们可以在标题栏背后添加一些额外的空间，从而避免出现页面跳动的情况。当前局高度的最简单方式是在body元素中添加一个padding-top，其值等于标题栏的高度。

body {
  padding-top: $header-height;
}

设置z-index

在设置标题栏fixed属性时，我们还需要设置合适的z-index。由于标题栏固定在屏幕顶部，因此可以将其层级设置在其他内容之上。

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

总结

本文介绍了两种常见的悬浮标题栏实现问题（页面跳动和遮挡内容），以及如何使用CSS和JavaScript来解决这些问题。大多数现代网站都使用悬浮标题栏来提供更好的用户体验，因此掌握这些技巧是非常重要的。希望本文对您有所帮助！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/651b7ae195b1f8cacd322404