CODEWITHSUNDEEP
javascripthtmlfullpage.js
Narkanister
Narkanister

Reputation: 904

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

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.

Upvotes: 0

Views: 111

Answers (1)

Alvaro
Alvaro

Reputation: 41595

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.

Upvotes: 0

Related Questions