用 position:sticky 做的 app bar 好象有点问题啊，翻页的时候会挡住一部分内容

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 1282 天前的主题，其中的信息可能已经有所发展或是发生改变。

https://codepen.io/weijarz/pen/ExWXpxZ

如上，一个红色 app bar,我需要永远出现在视口，数字串是内容。问题来了，比如在第一页，最下面数字是 8,那我按 page down 翻页，下一页内容应该出现 9,问题是下一页的 9 会被红色 bar 挡住了！

我记得以前看过不少文章是用 sticky 做工具栏的，有这种问题怎么做工具栏啊？还是说我用错了？

bar

sticky

挡住

视口

4 条回复 • 2021-05-26 15:01:47 +08:00

weijar

2021-05-26 12:05:06 +08:00

至于为什么不用 position:absolute，那个没有 stikcy 完美啊，还要额外在内容上做个和 bar 一样高的 margin-top 。
且如果焦点在工具栏上，比如那个按钮上，按 page down 是不会翻页的，而 sticky 的可以。

autoxbc

2021-05-26 13:22:35 +08:00

大多数情况下，相对视口高度来说，bar 的高度很小，过度滚动现象几乎察觉不到，以及，用翻页键滚动的更少

一定要的话，加上这两句可以实现需求
.root {
height:100vh;
overflow-y:hidden;
}
.content {
height:calc(100vh - 256px);
overflow-y:auto;
}

weijar

2021-05-26 13:57:59 +08:00

@autoxbc 我的 bar80px,刚好漏一行字。。。
你这个方法可行，但会象 position:absolute 一样，焦点不刚好定位在.content 上时键盘上下键和翻页会失效（比如焦点在那个按钮上时）

autoxbc

2021-05-26 15:01:47 +08:00

@weijar #3 这个行为是合理的，前面 .bar 点击后还可以键盘翻页才比较反常

可以尝试手动转移焦点
window.onload = () => addEventListener('click', () => document.querySelector('.content').focus() );