Position: fixed div to become position: "unfixed" & rest at point on page scroll

Next question : on all these pages – will the recurring content be placed at the end using “page as footer” ?

Once again edit: it would be nice to have a custom-class to that fixed div:
f.e.:

<div class="fixed-heading" style="position: fixed; z-index: -5;">
<h2 style="padding: 20px; background: #96c451; color: #fff;">We specialise in…</h2>
</div>

This is better to select for any css or script.
Because Enfold has allready implemented the waypoints script – it is easy to use this. You can have that last but one color-section ( #emergency ) as a trigger. When it comes to viewport you can let things happen. ( Add classes f.e. to that fixed div )

just for info – you can combine the waypoints script with the animate css: https://daneden.github.io/animate.css/
you can download the css form daneden – put it in your child-theme folder css ( if not existent – create one ) – load the css via child-theme functions.php:

// Einbinden von Animate.css
add_action( 'wp_enqueue_scripts', 'wp_load_animate', 20 );
function wp_load_animate() {
   wp_enqueue_style( 'animate', get_stylesheet_directory_uri().'/css/animate.css' );
}

see my test page from above with hinge class added
__________________________________

( if you don’t like to load the whole css – you can pick out the keyframes you like to have f.e: the hinge )

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

• This reply was modified 4 years, 8 months ago by Guenni007.

First : did you try that: https://kriesi.at/support/topic/position-fixed-div-to-become-position-unfixed-rest-at-point-on-page-scroll/#post-1204832

what i just mentioned above is that with a custom class it would be easier to address this element.
Now in the code there is as selector: #av_section_1 .avia_textblock div[style*="fixed"]

with your setup and the code above and f.e:
in addition :

@media only screen and (max-width: 767px) {
  .page-id-1048 #av_section_1 .flex_column:nth-of-type(2) {
      margin-top: 60px !important;
  }
}

the responsivie case could be ok too!
The more often I look at it, the more I can live with the fact that this fixed element slides under the texts.

• This reply was modified 4 years, 8 months ago by Guenni007.

this is only display block/none
i inserted on the text-block an additional entry:

@media only screen and (min-width: 768px) {
  .replaced-slogan {
      display: none;
  }
}

@media only screen and (max-width: 767px) {
  .fixed-heading {
    display: none;
  }
  
  .replaced-slogan {
  padding: 20px 20px 10px;
  background-color: #96c451;
  margin-bottom: 20px
  }
}

next way : https://webers-testseite.de/pureinstall/brodes/
maybe this is an option too?