Fullpage.js - Scroll Horizontally extension - fixed element visible for all slides in the section

Question

I'm using the Scroll Horizontally extension for Fullpage.js from alvarotrigo

In one section, I have two horizontal slides. I want them to have a fixed title that remains fixed in the same place on both slides (but only in that section).

Here's an example... the "Get in touch title" will remain fixed as the page slides from the left slide to the right slide: https://drive.google.com/file/d/18FwzZ6vwWPDfeNJOtNTsBk-rePaK02xh/view?usp=sharing

With the way the JS injects HTML elements I can't see how to fix a title to the section rather than the individual slides.

Answer 1

Just add the absolute positioned element inside the section but before or after the slides.

And make sure to use fullPage.js 4.

  <div class="section">
      <div class="fixed-slides-wrapper">Test</div>
        <div class="slide" data-anchor="slide1">Slide 2.1</div>
        <div class="slide" data-anchor="slide2">Slide 2.2</div>
    </div>

.section {
  text-align:center;
  font-size: 3em;
  position: relative;
}

.fixed-slides-wrapper{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  background: red;
  height: 80px;
  width: 100vw;
  color: white;
  text-align: center;
}

Codepen demo

If you used fullPage.js 3, make sure to check the migration guide.