[英]Why does the whole page push itself up a few pixels when I am tabbing through the page?
I am implementing a feature on a web page which allows the user to navigate using the tab key. 我正在网页上实现一项功能,该功能允许用户使用Tab键进行导航。
When I am tabbing through the page, eventually the page will have to automatically scroll down to tab to the new content. 当我浏览页面时,页面最终将不得不自动向下滚动以转到新内容。 When this happens, the entire page moves itself up a few pixels, this is proven by the navigation bar disappearing from the top of the page.
发生这种情况时,整个页面会将自己向上移动几个像素,这可以通过导航栏从页面顶部消失来证明。 (stays in the DOM, just out of view).
(停留在DOM中,只是看不见)。
Demo: 演示:
Code: 码:
app.component.html : app.component.html :
<div *ngIf="token" class="route-container">
<app-search [token]="token"></app-search>
<router-outlet></router-outlet>
</div>
app.component.scss : app.component.scss :
.route-container {
height: 100%;
flex-direction: column;
justify-content: space-between;
}
app-search{
position: relative;
z-index: 1;
}
search.component.html : search.component.html :
<nav class="navHeader">
...
</nav>
search.component.scss : search.component.scss :
.navHeader {
height: 48px;
display: flex;
align-items: center;
color: #808080;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.14);
}
Why does this happen and how do I fix it? 为什么会发生这种情况,我该如何解决?
Other information: 其他信息:
EDIT 编辑
After trying @Eliseo 's solution I changed the title of the question from 'why is the navigation moving' to 'Why does the whole page push itself' as I realised that it isn't just the menu being pushed up a few pixels. 在尝试@Eliseo的解决方案后,我将问题的标题从“为什么导航在移动”更改为“为什么整个页面都在推动自身”,因为我意识到不仅仅是菜单被推了几个像素。
Thanks 谢谢
are you asking about? 你在问吗?
.navHeader {
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.