Material Design 是一套由Google提出的设计规范，旨在统一移动端和Web端界面的外观和行为。其中包括悬浮标题栏的设计，在页面滚动时固定在屏幕顶部并保持可见。在实现过程中，我们可能会遇到以下问题，并提供解决方案。
问题1：页面跳动
在实现悬浮标题栏的过程中，我们会给标题栏设置fixed位置，这意味着它会脱离文档流。如果网页内容高度不够，或者使用了异步加载数据的情况下，当浏览器计算视口高度和元素位置时，页面会发生跳动。
解决方式：
使用placeholder撑开高度
为避免页面跳动，可以使用一个隐藏的占位符_placeholder_来撑开标题栏的高度，从而避免标题栏迅速离开文档流，代码如下：
--- -
--------- ------
---- --
----- --
------ --
-------- ----
--------- -
-------- ---
-------- ------
------- --------------- ----------------- --
-
-使用JavaScript处理
当页面内容不能确定时，我们可以使用JavaScript动态设置标题栏的高度：
----- ------ - --------------------------------- ----- ----------- - ------------------------------ ------------------------ - --------------------------- ---------------------------------------------- --------
通过这种方法，我们可以使用JavaScript在标题栏前创建一个占位符，并将其高度设置为标题栏的高度。
问题2：遮挡内容
当标题栏被固定在屏幕顶部时，可能会导致某些内容被遮挡。
解决方式：
添加额外的空间
我们可以在标题栏背后添加一些额外的空间，从而避免出现页面跳动的情况。当前局高度的最简单方式是在body元素中添加一个padding-top，其值等于标题栏的高度。
---- - ------------ --------------- -
设置z-index
在设置标题栏fixed属性时，我们还需要设置合适的z-index。由于标题栏固定在屏幕顶部，因此可以将其层级设置在其他内容之上。
--- - --------- ------ ---- -- ----- -- ------ -- -------- ---- -
总结
本文介绍了两种常见的悬浮标题栏实现问题（页面跳动和遮挡内容），以及如何使用CSS和JavaScript来解决这些问题。大多数现代网站都使用悬浮标题栏来提供更好的用户体验，因此掌握这些技巧是非常重要的。希望本文对您有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/651b7ae195b1f8cacd322404