0

I have built a site and has a very long page. We decided to add parallax to it using pure CSS3 and it worked.

The CSS3 parallax code I got from here:

codepen.io/keithclark/pen/JycFw

Later, we decided to apply a sticky header but notice it did not appear when we scrolled down (about 180px). Here's the link to where we got the code from:

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

I discovered that the issue is that the 'pure css3' parallax uses 'perspective: 1px;' in the body element. Once I removed that then the stick header works but then the parallax does not.

I am trying to get both parallax and stick header to work together.

Below is the link I am working on.

http://falconcropprotection.com/home.htm

Obviously, you can see how the stick header works when you scroll down. But the parallax does not and can be found by searching for ' The FrightKite Seems to Fly Forever ' and that will take you to the parallax image.

The HTML for that is simple:

The css is embedded in the head section and pasted here for you convenience:

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

Here's the js for the sticky header.

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

2 Answers2

0

There is actually a recent feature spreading through browser support tables for a pure CSS sticky header, using position: sticky;. Edge is the only current browser that doesn't have that support currently.

Without seeing more of your code I can't tell exactly what might be wrong, but sticky headers aren't usually triggered by a click event.

Gwellin
  • 484
  • 1
  • 4
  • 8
0

I was not able to get the pure CSS3 parallax to work with the sticky header and so I decided to a script in hopes to resolving the issue.

After google the net, there were many variations of parallax script out there. Most work just fine out of the box but I still ended up with the conflict issue with my sticky header. Some of these scripts were done weird or a bit challenging to implement. I was something so simple that I could close my eyes to do it.

I found this one to do just that:

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

Way simple, for me at least. Seems to work for all devices.

EddieK
  • 15
  • 1
  • 4