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