0
我建立了一个网站，并有一个很长的页面。我们决定使用纯CSS3添加视差，并且它工作。纯CSS3视差与粘滞标题问题
CSS3的视差的代码，我从这里得到：
codepen.io/keithclark/pen/JycFw
后来，我们决定采用一个棘手的头，但请注意，当我们向下滚动，它并没有出现。（约180px）。这里的链接到我们得到了从代码：
我发现，问题是，“纯CSS3”视差用途的角度看：1px的;“在身体元素。一旦我删除了那个，然后棒头的作品，但然后视差不。
我想让视差和棍头一起工作。
以下是我正在处理的链接。
http://falconcropprotection.com/home.htm
很明显，你可以看到当你向下滚动棍头是如何工作的。但是视差并没有，并且可以通过搜索'The FrightKite似乎永远飞翔'来找到，并且会将您带到视差图像。
造成这种情况的HTML很简单：
CSS中嵌入头部和粘贴在这里对您的方便：
.slide {
position: relative;
/*padding: 5vh 10%;*/
min-height: 180vh;
width: 100vw;
box-sizing: border-box;
transform-style: inherit;
background-repeat:no-repeat;
}
/*img {
position: absolute;
top: 50%;
left: 35%;
width: 320px;
height: 240px;
transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
padding: 10px;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
img:last-of-type {
transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
}
*/
.slide:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left:0;
right:0;
}
.title {
width: 50%;
padding: 5%;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
.slide, .slide:before {
background: 50% 30%/cover;
}
#slide1:before {
background-image: url("/images/home-bg.jpg");
transform: translateZ(-1px) scale(2);
z-index:-1;
}
#slide2 {
background-image: url("http://lorempixel.com/640/480/abstract/3/");
background-attachment: fixed;
}
下面是粘头中的JS。
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 180){
$('#subhead').addClass("sticky");
}
else{
$('#subhead').removeClass("sticky");
}
});
</script>
我的歉意。我复制了粘滞标题的错误脚本。我已更新我的帖子以显示正确的粘性js。 – Eddie
任何有关如何解决我的问题的见解？ – Eddie