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

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

This topic created in 1844 days ago, the information mentioned may be changed or developed.

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

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

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

bar

sticky

挡住

视口

4 replies • 2021-05-26 15:01:47 +08:00

weijar

May 26, 2021

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

autoxbc

May 26, 2021

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

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

weijar

May 26, 2021

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

autoxbc

May 26, 2021

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

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