css - 带有粘性标题问题的纯 CSS3 视差

Question

我建了一个网站，页面很长。我们决定使用纯 CSS3 为它添加视差并且它起作用了。

我从这里得到的 CSS3 视差代码:

codepen.io/keithclark/pen/JycFw

后来，我们决定应用一个粘性标题，但注意到当我们向下滚动时(大约 180 像素)它没有出现。这是我们从中获取代码的链接:

http://www.webdesignerdepot.com/2014/05/how-to-create-an-animated-sticky-header-with-css3-and-jquery/

我发现问题在于“纯 css3”视差使用“透视:1 像素；”在正文元素中。一旦我删除了它，那么杆头就可以工作，但是视差就不会了。

我正在尝试让视差和棒 header 一起工作。

下面是我正在处理的链接。

http://falconcropprotection.com/home.htm

显然，当您向下滚动时，您可以看到杆头是如何工作的。但是视差没有并且可以通过搜索“The FrightKite Seems to Fly Forever”找到，这将带您到视差图像。

它的 HTML 很简单:

css 嵌入在 head 部分并粘贴在这里为您提供方便:

    .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;
}

这是粘性 header 的 js。

    <script>
$(window).scroll(function() {
if ($(this).scrollTop() > 180){  
    $('#subhead').addClass("sticky");
  }
  else{
    $('#subhead').removeClass("sticky");
  }
});
</script>

Answer 1

实际上，最近有一项功能通过浏览器支持表传播，用于纯 CSS 粘性 header ，使用 position: sticky;。 Edge is the only current browser that doesn't have that support currently.

在没有看到更多您的代码的情况下，我无法准确判断出哪里出了问题，但粘性 header 通常不会由 click 事件触发。