滚动时，侧栏中的Bootstrap 3幻灯片与菜单断开连接？

Question

我正在尝试在导航栏中创建一个幻灯片到我的网站，但我注意到当我点击＆＃34;图标按钮＆＃34;打开导航，如果在页面上滚动，导航将从菜单中断开并滚动内容。我在bootstrap是一个新的，我不确定是什么导致这个。

我试图改变

.side-collapse-container {
                width:100%;
           -->     position:relative;             
                left:0;
                transition:left .4s;

            } 

到

.side-collapse-container {
                width:100%;
          -->       position:fixed;            
                left:0;
                transition:left .4s;

            }

然而，修复导致不同的问题。当固定为添加时，我现在无法在＆＃34;图标按钮＆＃34;时滚动任何内容。没有被点击。内容似乎被锁定了＃34;

有人可以建议我如何纠正这个问题？

示例位于此处 - https://stevia-affirm.codio.io/DaveTest.html

感谢您提供任何帮助。

Answer 1

当导航在媒体查询中移动时，请使用：

.side-collapse {
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 50px;
    transition: width 0.4s ease 0s;
    width: 250px;
    z-index: 100;
}

因为你有固定位置的导航栏，它会粘在底部，一旦它的位置变为绝对位置并且顶部高度发生变化，它就可以正常工作。