javascript - Material Design Lite 固定导航行

标签 javascript css navigationbar material-design-lite

我在修改 Android page 的模板时遇到问题作为示例提供(可以找到代码 here )。我想让顶部的导航栏透明。问题是它背后没有任何东西,所以它并没有真正改变。解决方法是使导航栏成为页面的一部分。如您所见,当前滚动条在导航栏之后开始,而我想让导航栏成为页面可滚动部分的一部分。我尝试从 HTML 中删除所有相关的 mdl header 类,但没有效果。我发现 material.min.js(作为 MDL 的一部分提供)使导航条位于滚动条的顶部,但我不是很擅长 JS,我不确定我需要修改哪一部分才能实现我想要的。我也对不修改 material.min.js 但使用自定义 JS/CSS 的解决方案持开放态度。

最佳答案

对你有一点帮助。

同样的事情发生在我身上。对于将固定在顶部的固定导航栏,您可以对 material.css 文件做一些小技巧。

更改 .mdl-layout__header 类

.mdl-layout__header { display: -webkit-box;display: -webkit-flex;display:ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-flex-direction: column; and goes on

.mdl-layout__header {position : fixed;  display: -webkit-box;  display: -webkit-flex;  display: -ms-flexbox;  display: flex;  -webkit-box-orient: vertical;  -webkit-box-direction: normal;  -webkit-flex-direction: column;

添加的属性是position : fixed;到mdl-layout__header类

希望这有帮助:)

关于javascript - Material Design Lite 固定导航行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34576758/

相关文章:

css - 如何居中自定义 Wordpress 主题导航栏?

安卓平板导航栏不会隐藏

javascript - 从 PHP 过渡到 JavaScript(AngularJS、NodeJS 等...)的最佳方式

javascript - 为什么没有打印 html form.input.value?

css - Sass for 循环通过 td 使用::before 选择器

html - Bootstrap 画廊中的网格损坏

html - CSS:在悬停时替换文本,但无法平滑过渡到新文本?

SwiftUI:可重用跨平台(iOS 和 macOS) View 中的导航栏标题

javascript - 尝试循环 JSON 文件

javascript - 使用 Javascript 在当前窗口后面打开一个窗口?