html - 在没有 JS 的 CSS 事件后保持页面内的滚动位置？

Question

我有一个大页面，其中包含一系列“幻灯片”和一个菜单，供您选择要查看的幻灯片。菜单中的链接会将您带到相应的幻灯片，但打开或关闭菜单会使您返回到页面顶部，这完全违背了目的。

我正在使用 CSS 在单击菜单按钮时将菜单推送到 View 中；打开/关闭菜单后如何防止页面更改滚动位置？如果可能，我想避免使用 JS，但如果需要的话可以。

菜单打开 CSS:

.nav-trigger:checked + label{
    left: 200px;
}

.nav-trigger:checked ~ main{
    left: 200px;
}

代码笔:http://codepen.io/anon/pen/Rappqg

Answer 1

发生这种情况是因为单击会使页面滚动到复选框在可见窗口框架中的位置。解决方案非常简单:将 .nav-trigger 设置为 position: fixed;。

Updated CodePen .