Javascript 粘性导航栏无法在Paralax滚动中使用透视css属性_Javascript_Css_Navbar_Parallax_Sticky

Javascript 粘性导航栏无法在Paralax滚动中使用透视css属性

javascript css

Javascript 粘性导航栏无法在Paralax滚动中使用透视css属性,javascript,css,navbar,parallax,sticky,Javascript,Css,Navbar,Parallax,Sticky,我发现我在div中列出的用于视差滚动的透视CSS属性导致我的粘性导航条功能根本无法工作有人有什么建议吗以下是我的代码链接： $'.navbar'。粘贴{ 偏移量：{ 顶部：功能{ 返回this.top=$'.navbar'.offset.top } } }; @介质最大宽度：600px{ .旋转木马标题{ 显示：无； } navbar先生{ 页边距底部：0；边界半径：0； } .row.content{ 高度：450像素 } .侧导航{ 填充顶部：20px；背景色：F1F1；身高：1

我发现我在div中列出的用于视差滚动的透视CSS属性导致我的粘性导航条功能根本无法工作

有人有什么建议吗

以下是我的代码链接：

$'.navbar'。粘贴{ 偏移量：{ 顶部：功能{ 返回this.top=$'.navbar'.offset.top } } }; @介质最大宽度：600px{ .旋转木马标题{ 显示：无； } navbar先生{ 页边距底部：0；边界半径：0； } .row.content{ 高度：450像素 } .侧导航{ 填充顶部：20px；背景色：F1F1；身高：100%； } } @介质最大宽度：767px{ .侧导航{ 高度：自动；填充：15px； } .row.content{ 高度：自动； } } .panel-footer.panel-custom{ 背景：红色；颜色：白色； } .navbar.navbar-default.affix{ 排名：0；宽度：100%； } 琼伯伦先生{ 页边距底部：0； } /*Parllax滚动样式开始*/ .视差{ 高度：100vh；溢出-x：自动； /*我认为这是问题的根源*/ -webkit透视图：300px；透视图：300px； /*我认为这是问题的根源*/ } .视差组{ 位置：相对位置；高度：500px；高度：100vh； -webkit变换样式：保留-3d；变换样式：保留-3d； } .视差层{ 位置：绝对位置；排名：0；左：0；右：0；底部：0； } .视差{ -webkit转换：translateZ90px标度7；转换：translateZ90px标度7； z指数：1； } .头衔{ 文本对齐：居中；位置：绝对位置；左：50%；最高：50%； -webkit转换：翻译-50%，-50%；转化：转化-50%，-50%； } 第一组{ z指数：5； /*滑过第2组*/ 背景色：透明 } 第1组：视差层基础{ 背景：红色；身高：65% } 第1组：视差前向层{ 背景：黄色左侧：27%；最高：20% } 第2组{ z指数：3； /*在第1组和第3组下滑动*/ } 第2组：视差层{ 背景：绿色；背景尺寸：封面；高度：616px；填充顶部：140px；填充底部：140px； } JS-Bin FDSFDSFSDFDSD

一些代码会浪费空间，从而使粘性导航栏正常工作

你为什么不把导航栏放在视差之外呢？这会解决你的问题

感谢您的回复，导航栏不在视差之外的原因是因为视差div有一个overflow-x:auto，因此导航栏会在视差div上方创建一个单独的窗口，如果我取出overflow-x，它会工作，但是我不再有视差滚动的效果了。overflow-x:auto如何帮助你获得视差滚动效果？我不明白。请看这个链接到一个示例的演示，主视差div有一个溢出-x和y，没有它，这种特殊的高级视差滚动方式不起作用，它使用几层相互重叠，以产生每一层分别移动的错觉，这不仅仅是让层之间滚动。如果你看到你的参考链接。视差是溢出的-x：隐藏；那么你是说它应该是隐藏的，而不是自动的？没有任何改变，问题在于.parallax_group div-webkit转换样式：preserve-3d；变换样式：保留-3d；