- 原创文章, 作者: 蒋璇, 就职于 丁香园, 任职 Insight 医药数据库 前端开发. 开源社区热爱者
- 文章 LICENSE: creativecommons.org/licenses/by…
什么是 fixed 定位, 可横向滚动的导航条
一种常见的页面导航条的设计为页面向下滚动到一定的距离时让导航条固定在顶端, Insight 的宣传首页就是这样处理的:
定宽的页面, 非响应式的页面会让用户缩小浏览器宽度的时候可横向滚动:
带来的问题
很多网站的导航条都是这样处理的, 但是这里会带来一个小小的问题, 在用户下拉页面出现置顶导航条, 并且浏览器的宽度不够时, fixed
定位的导航条将不能正确的跟随滚动条进行滚动.
请注意观察导航条, 其无法跟随水平滚动条滚动:
处理方案
让导航条自适应宽度
这种方案一般用在导航条上没有很多元素, 即便导航条自适应宽度也不会导致导航条样式错乱. 这里不适用.
渐进增强 - 采用 sticky 定位
为了简洁, 没有处理下拉的情况下置顶导航条
用到的浏览器特性
sticky 定位可以做到让元素保持在容器的视口中, 并且是可以跟随水平滚动条进行滚动, 所以在支持 sticky 的浏览器中可以达到想要的效果, 不支持的浏览器就让它还是使用 fixed 定位或者是让其排版错乱吧😂.
实现代码如下:
<header class="d-flex flex-items-center">朱自清 - 背影</header>
<main>我说道,“爸爸,你走吧。”他望车外看了看,说,“我买几个橘子去。你就在此地,不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台,须穿过铁道,须跳下去又爬上去。父亲是一个胖子,走过去自然要费事些。我本来要去的,他不肯,只好让他去。我看见他戴着黑布小帽,穿着黑布大马褂,深青布棉袍,蹒跚地走到铁道边,慢慢探身下去,尚不大难。可是他穿过铁道,要爬上那边月台,就不容易了。他用两手攀着上面,两脚再向上缩;他肥胖的身子向左微倾,显出努力的样子。这时我看见他的背影,我的泪很快地流下来了。我赶紧拭干了泪,怕他看见,也怕别人看见。我再向外看时,他已抱了朱红的橘子望回走了。过铁道时,他先将橘子散放在地上,自己慢慢爬下,再抱起橘子走。到这边时,我赶紧去搀他。他和我走到车上,将橘子一股脑儿放在我的皮大衣上。于是扑扑衣上的泥土,心里很轻松似的,过一会说,“我走了;到那边来信!”我望着他走出去。他走了几步,回过头看见我,说,“进去吧,里边没人。”等他的背影混入来来往往的人里,再找不着了,我便进来坐下,我的眼泪又来了。</main>
body {
width: 1200px;
color: white;
}
header {
/* 默认可以采用 fixed 定位 */
position: fixed;
width: 1200px;
top: 0;
height: 40px;
background: linear-gradient(90deg, blue, red);
}
main {
/* 注意处理间距 marin-top */
margin-top: 40px;
height: 3000px;
background-color: green;
}
/**
* 在现代浏览器之中采用 sticky 定位
*/
@supports (position: sticky) {
header {
position: sticky;
top: 0;
}
header + main {
margin-top: 0;
}
}
你可以看下 codepen 上面的示例:
See the Pen MZQdyV by 蒋璇 (@aizhizhi) on CodePen.
或者选择去 insight 的 宣传页面 看下实际的效果(需要在 PC 端, 调整浏览器宽度,让其出现水平滚动条)