产品页面上的这个子导航，我希望在页面滚动到这个位置上的时候，它就固定在页面上显示 ... 用 Semantic UI 的 visibility 模块可以很容易实现这个功能 ..

这个模块我们之前已经用过了，用它去控制了产品页上的英雄区上的视频背景的播放状态 .. 你想使用 visibility 提供的功能有，需要把这个模块带的 js 文件嵌入到页面上 .. 因为我在页面上用了全部 Semantic UI 的脚本，所以就不需要再单独嵌入这个模块了。

打开自定义的脚本.. 我们去配置一下子导航 .. 在 app ... scripts 下面，打开 main.js ..

先用 jQuery 找到页面上的子导航元素 ... 这里就是 .ui.sub.navbar ，也就是同时带 ui ，sub ，还有 navbar 的元素 ..

用一下 visibility 这个方法 ... 这个方法是 semantic ui 里的 visibility 模块提供的 ..

给它一个对象参数 ... 然后把 type 属性的值设置成 fixed .. 这样就可以了 .. 保存一下 ..

到浏览器上再试一下 .. 向下滚动页面 ... 滚动到这个子导航的时候，它就会固定在页面上显示 ..

打开浏览器的开发者工具 ... 检查一下这个子导航元素 ..

你会发现，它在固定在页面上的时候，元素上会多了一个 fixed 类 ... 使用这个类我们可以去给导航添加点样式 ..

打开导航的栏的样式文件 .. 在子导航的里面，嵌套一个 &.fixed ... 子导航元素上有这个类的时候， 我们把导航元素的背景加一点半透明的效果 ... 重新设置一下 background ，值用 rgba ... 249, 249, 249, 0.9

然后再嵌套一个 header .. 重新设置一下标题的样式 ... 把文字的颜色改的深一点 .. rgba(0, 0, 0, 0.85) ..

再去预览一下 ... 滚动页面 ... 子导航栏在固定在页面上显示的时候，标题的文字的颜色 ... 还有导航栏的背景都会有一些变化 ...

这个 visibility 在 iOS 设备的浏览器上会有点问题 .. 我们需要去修复一下 .. 打开 _base.scss 这个样式文件 ... 这里设置一下 html 元素的 height 属性 .. 值设置成 initial; 这样就可以解决 iOS 浏览器上的 visibility 模块的问题 ..