Question

我一直在制作纯css幻灯片菜单..

基本上设置导航菜单位置：固定顶部：0右：-200 ..使用单选按钮控制幻灯片

{{1}}

点击使用translatex（-200px）移动正文内容并引入菜单..

唯一的问题是内容，无论内容向下滚动到页面的多远，内容都会跳回到顶部..

最终我希望内容保持原样，以防用户取消菜单并继续阅读..

这是一个显示问题的笔..滚动主要内容，然后打开菜单.. CodePen ..它将始终重置内容跳回到顶部..

另一个问题，当菜单可见时，如果您在菜单部分滚动，它将滚动主要内容，而不是菜单..

Answer 1

解决了我自己的问题..

这是由于两个单选按钮的位置..添加可见性：隐藏;每个单选按钮都解决了问题..

    <input type="radio" id="nav-expand" name="nav" />
    <input type="radio" id="nav-collapse" name="nav" checked="checked" />

    #nav-expand,
    #nav-collapse {
        visibility: hidden;
    }

新版Code Pen修改了CSS ..

这还没有解决另一个问题..当菜单可见时，如果你滚动菜单部分，它将滚动主要内容，而不是菜单..

纯CSS3幻灯片菜单 - 内容在幻灯片上跳转到顶部

1 个答案: