Is it possible to see the sections that are scrolled when you click on an anchor in the menu?

[Jars-of-jam-Scheduler]

Hello,

I have written the menu of anchors and my pilling JS set-up.

If I click on the anchor #3, when anchor #1 is active (that is, when I'm in the section #1), I would want to reach the section #3 but only after having seen the section #2 scrolling. Is it possible?

For the moment, what PagePiling does is: (anchor #1 -> anchor #3 ; section #1 -> section #3). What I would want is: (anchor #1 -> anchor #3 ; section #1 -> section #2 -> section #3). Or, if you want: (anchor #1 -> anchor #2 -> anchor #3 ; section #1 -> section #2 -> section #3).

Note: the same behavior would be used for when the user clicks on a navigation bullet.

My code:

<ul id="myMenu">
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
    <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
</ul>

<div id="pagepiling">
    <div class="section">1 section</div>
    <div class="section">2 section</div>
    <div class="section">3 section</div>
</div>

body {
  margin: 0;
}

.section {
  height: 100vh;
}

#myMenu {
  float: left;
}

jQuery(document).ready(function() {
    jQuery('#pagepiling').pagepiling({
    sectionsColor: ['blue', 'red', 'black'],
    anchors: ['firstPage', 'secondPage', 'thirdPage'],
  });
});

Thank you! Have a nice day. Best regards,

[alvarotrigo]

If I click on the anchor #3, when anchor #1 is active (that is, when I'm in the section #1), I would want to reach the section #3 but only after having seen the section #2 scrolling. Is it possible?

For this you should be using my other library, fullpage.js, kind of its big brother :) A much more complete library, actively maintained, with wrappers for Vue, Angular and React and plugins for Wordpress or even a web editor online :)

[Jars-of-jam-Scheduler]

Thank you!

https://alvarotrigo.com/fullPage/#page2 in this example, there is a horizontal slider within one of the vertical slider's slide. However, if I scroll, the vertical slider keeps to be active. Is there an option to allow the user to vertical scroll until and after the horizontal slider, and, when he is in the horizontal slider, to scroll inside the latter? When the horizontal slider would be finished, then the user goes to the next slide of the vertical slider, which becomes again active.

[alvarotrigo]

Sure! You'll need to acquire the Scroll Horizontally extension for that. Here's an example: https://alvarotrigo.com/fullPage/extensions/scroll-horizontally.html

[Jars-of-jam-Scheduler]

Thank you. My firm has purchased your plug-in and the Horizontal Scrolling extension this morning. We are very satisfied :-)). Just another question, I didn't find in your docs the way to add a fixed template (or section) to an horizontal slider. Since it's fixed, it would be common to each slide. This fixed template would not move.

Do you provide this feature?

[alvarotrigo]

Do you provide this feature?

Not out of the box. The easiest way is by adding the fixed element to the body element. Then make it appear or fadeIn when you land in the section with horizontal slides.

If you do not wan to go that path, then you would have to dynamically add the element using JavaScript, it should be added inside the section but outside the fp-slides element. Just like the navigation bullets or the control arrows on the demo page:

[Jars-of-jam-Scheduler]

Thank you very much. :-) Our graphic designer said your plug-in was very fluid ;)