jQuery scroll() Method not working on pagepiling.js

Question

I need to add class for #menu only when the '#pagepiling .section:first-child' is active. While scrolling the class must be removed. I need to check the condition on every scroll.

$(window).scroll(function () {
    alert("woow");
    if($('#pagepiling .section:first-child').hasClass('active')) {
        $("#menu").addClass("sticky");
    }
});

Please check the code from here https://codepen.io/anon/pen/PagXLw

Answer 1

You can use "onLeave" callback action (read the documentation) and check if the slide is the first or not. Something like this https://codepen.io/anon/pen/wXZVjB

$(document).ready(function() {
   /*
   * Plugin intialization
   */
      $('#pagepiling').pagepiling({
       menu: '#menu',
       anchors: ['page1', 'page2', 'page3', 'page4'],
       sectionsColor: ['white', '#ee005a', '#2C3E50', '#39C'],
       navigation: {
        'position': 'right',
        'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Page 4']
       },
       afterRender: function(){
        $('#pp-nav').addClass('custom');
            
       },
          onLeave: function(index, nextIndex, direction){
          if(nextIndex==1) {                                             
  
  $("#menu").addClass("sticky");
            } else{
              $("#menu").removeClass("sticky");
            }
                                                   
                                                        },
       afterLoad: function(anchorLink, index){
        if(index>1){
         $('#pp-nav').removeClass('custom');
        }else{
         $('#pp-nav').addClass('custom');
        }
       }
   });
   /*
      * Internal use of the demo website
      */
      $('#showExamples').click(function(e){
    e.stopPropagation();
    e.preventDefault();
    $('#examplesList').toggle();
   });
   $('html').click(function(){
    $('#examplesList').hide();
   });
 // if($('#pagepiling .section:first-child').hasClass('active')) {
 //  $("#menu").addClass("sticky");
 // }
     });
$(window).scroll(function () {
 alert("woow");
 if($('#pagepiling .section:first-child').hasClass('active')) {
  $("#menu").addClass("sticky");
 }
});

/* Section 1
  * --------------------------------------- */
 #section1 h1{
  color: #444;
 }
 #section1 p{
  color: #333;
  color: rgba(0,0,0,0.3);
 }
 #section1 img{
  margin: 20px 0;
  opacity: 0.7;
 }
 /* Section 2
  * --------------------------------------- */
 #section2 h1,
 #section2 p{
  z-index: 3;
 }
 #section2 p{
  opacity: 0.8;
 }
 #section2 #colors{
  right: 60px;
  bottom: 0;
  position: absolute;
  height: 413px;
  width: 258px;
  background-image: url(imgs/colors.gif);
  background-repeat: no-repeat;
 }
 /* Section 3
  * --------------------------------------- */
 #section3 #colors{
  left: 60px;
  bottom: 0;
 }
 #section3 p{
  color: #757575;
 }
 #colors2,
 #colors3{
  position: absolute;
  height: 163px;
  width: 362px;
  z-index: 1;
  background-repeat: no-repeat;
  left: 0;
  margin: 0 auto;
  right: 0;
 }
 #colors2{
  background-image: url(imgs/colors2.gif);
  top:0;
 }
 #colors3{
  background-image: url(imgs/colors3.gif);
  bottom:0;
 }
 /* Section 4
  * --------------------------------------- */
 #section4 p{
  opacity: 0.6;
 }
 /* Overwriting fullPage.js tooltip color
 * --------------------------------------- */
 #pp-nav.custom .pp-tooltip{
  color: #AAA;
 }
 #markup{
  display: block;
  width: 450px;
  margin: 20px auto;
  text-align: left;
 }
.sticky {
  background: red;
}

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato:300,400,700" />
<link rel="stylesheet" type="text/css" href="https://alvarotrigo.com/pagePiling/jquery.pagepiling.css" />
<link rel="stylesheet" type="text/css" href="https://alvarotrigo.com/pagePiling/demo.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

 <script type="text/javascript" src="https://alvarotrigo.com/pagePiling/jquery.pagepiling.min.js"></script>

<ul id="menu" class="sticky">
  <li data-menuanchor="page1" class="active"><a href="#page1">เริ่มต้น</a></li>
  <li data-menuanchor="page2"><a href="#page2">เราทำอะไร</a></li>
  <li data-menuanchor="page3"><a href="#page3">ฟีเจอร์</a></li>
  <li data-menuanchor="page4"><a href="#page4">ติดต่อเรา</a></li>
 </ul>





 <div id="pagepiling">
     <div class="section" id="section1">
      <h1>สวัสดีเนม</h1>
   <p>Create an original scrolling site by pagePiling.js</p>
   <img src="https://alvarotrigo.com/pagePiling/imgs/pagePiling-plugin.gif" alt="pagePiling" />
   <br />

     </div>
     <div class="section" id="section2">
      <div class="intro">
       <div id="colors"></div>
       <h1>jQuery plugin</h1>
       <p>Pile your sections one over another and access them scrolling or by URL!</p>
       <div id="markup">
        <script src="https://gist.github.com/alvarotrigo/4a87a4b8757d87df8a72.js"></script>
       </div>
      </div>
     </div>
     <div class="section" id="section3">
      <div class="intro">
       <h1>Configurable</h1>
       <p>Plenty of options, methods and callbacks to use.</p>
       <div id="colors2"></div>
       <div id="colors3"></div>
      </div>
     </div>
     <div class="section" id="section4">
      <div class="intro">
       <h1>Compatible</h1>
       <p>Designed to work on tablet and mobile devices.</p>
       <p>Oh! And its compatible with old browsers such as IE 8 or Opera 12!</p>
      </div>
     </div>
 </div>

Answer 2

That won't work. Pagepiling.js doesn't use scrollbar, therefore the scroll event won't get fired.

I would encourage you to make use of the fullPage.js library instead together with the parallax extension

You can emulate the pagePiling.js effect by placing your content in the fp-bg element, as can be seen in this blog article.

You could make use the scroll event as long as you use the option scrollBar:true or autoScrolling:false. Additionally, you can also make use of fullpage callbacks or css state classes in order to fire actions or css changes.

You can also see this video where conditional animations are explained.