Question

我已经建立了一个网站并且页面非常长。我们决定使用纯CSS3为它添加视差，并且它有效。

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

codepen.io/keithclark/pen/JycFw

后来，我们决定应用一个粘性标题，但是当我们向下滚动时（约180px），它没有出现。这是我们从中获取代码的链接：

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

我发现问题在于纯粹的css3＆＃39;视差使用＆＃39;观点：1px;＆＃39;在身体元素。一旦我删除了那个，那么棒头工作，但视差不会。

我正在努力让视差和棒状头一起工作。

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

http://falconcropprotection.com/home.htm

显然，当您向下滚动时，您可以看到棒状头的工作原理。但通过搜索＆＃39;可以找到视差。 FrightKite似乎永远飞翔＆＃39;这将带你到视差图像。

这方面的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>

Answer 1

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

如果没有看到更多代码，我无法确切地说出可能出现的问题，但通常不会通过click事件触发粘贴标头。

Answer 2

我无法使用纯CSS3视差来处理粘性标题，因此我决定使用脚本来解决问题。

google网后，那里有很多视差脚本的变种。大多数工作开箱即用，但我仍然用我的粘性标题结束了冲突问题。其中一些脚本实现起来很奇怪或有点难度。我很简单，我可以闭上眼睛去做。

我发现这个就是这样做的：

http://ianlunn.co.uk/plugins/jquery-parallax/

方式简单，对我来说至少。似乎适用于所有设备。

具有粘滞头问题的纯CSS3视差

2 个答案: