jQuery scroll() 方法在 pagepiling.js 上不起作用

Question

仅当 '#pagepiling .section:first-child' 处于活动状态时，我才需要为 #menu 添加 class。滚动时必须删除 class。我需要检查每个卷轴的情况。

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

请从这里检查代码https://codepen.io/anon/pen/PagXLw

Answer 1

那不行。 Pagepiling.js 不使用滚动条，因此不会触发滚动事件。

我鼓励您使用 fullPage.js library instead together with the parallax extension

您可以通过将您的内容放在 fp-bg 元素中来模拟 pagePiling.js 效果，如 this blog article.

中所示

只要使用选项scrollBar:true或autoScrolling:false就可以使用滚动事件。此外，您还可以使用 fullpage callbacks or css state classes 来触发操作或 css 更改。

您还可以查看 this video 解释条件动画的地方。

Answer 2

您可以使用 "onLeave" 回调操作（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>

jQuery scroll() 方法在 pagepiling.js 上不起作用

jQuery scroll() Method not working on pagepiling.js

html

css

jquery

pagepiling.js