Material Design 中的 App Bar 可以分为有宽度和无宽度两种类型。有宽度的 App Bar 是指有一个固定高度和固定宽度的导航栏,而无宽度的 App Bar 是指没有固定宽度,可以随着页面滚动而自由伸缩的导航栏。在本文中,我们将会学习如何实现 Material Design 中无宽度的 App Bar。
实现方法
使用 position:fixed
实现
实现无宽度的 App Bar 的方法有很多,其中最常用的方法是使用 position:fixed
属性。这个属性可以让元素相对于浏览器窗口固定位置,而不会随着页面的滚动而移动。
以下是一个基本的无宽度的 App Bar 的代码示例:
---- ---------------- --------- ---------- ------
-------- - --------- ------ ---- -- ----- -- ------ ----- ------- ----- ----------------- -------- ------ ----- ------------ ----- -------- - ----- ----------- ----------- -
代码解释:
position:fixed
属性让 App Bar 固定在浏览器窗口顶部。top: 0
和left: 0
属性让 App Bar 的位置与浏览器窗口的位置相同,也就是相对于浏览器窗口左上角。width: 100%
属性让 App Bar 的宽度与浏览器窗口的宽度相同,实现无宽度的效果。height
、background-color
、color
等属性设置了 App Bar 的一些基本样式。line-height: 50px
属性让文字与 App Bar 垂直居中。padding: 0 16px
和box-sizing: border-box
属性设置了 App Bar 的内边距和盒模型。
结合 JavaScript 实现滚动隐藏 App Bar
如果我们希望 App Bar 在页面向下滚动时自动隐藏,可以使用 JavaScript 结合 CSS 实现。以下是一个基本的实现代码示例:
---- ---------------- --------- ---------- ------ ---- ---------------- --- ------
-------- - --------- ------ ---- -- ----- -- ------ ----- ------- ----- ----------------- -------- ------ ----- ------------ ----- -------- - ----- ----------- ----------- ----------- --------- ---- ------------ ---------- -------------- - --------------- - ---------- ------------------ - -------- - ------------ ----- --- -
--- ------------- - -- --------------------------------- ----------- --- ---------------- - ------------------ -- ----------------------------------- -- ----------------- - --------------- -- ---- ----------------------------------------------------------- - ---- - -- ---- -------------------------------------------------------------- - ------------- - ----------------- -- -------
代码解释:
- 新增了一个
<div class="content">
元素作为页面内容容器,避免内容被 App Bar 遮挡。 .app-bar
类新增了transition
和transform
属性,用于实现滚动隐藏的效果。transition
属性设置了过渡动画的参数,transform
属性设置了初始偏移量,初始偏移量为translateY(0)
,也就是不偏移。当添加.hidden
类时,偏移量变为translateX(-100%)
,也就是向左偏移并隐藏 App Bar。- JavaScript 部分监听了
window
对象的滚动事件,判断向上或向下滚动。向下滚动则添加.hidden
类,向上滚动则移除.hidden
类。
总结
本文介绍了如何实现 Material Design 中无宽度的 App Bar,主要使用了 position:fixed
属性和 JavaScript 监听滚动事件等技术。通过本文的学习,你可以熟练掌握这些技术,并自行实现更复杂和美观的无宽度的 App Bar。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/64f00330f6b2d6eab39f1e27