fullpage.js 如何检测垂直滚动

Question

我正在构建一个包含 fullpage.js 插件提供的一些 "stages" 的页面。

我的主要问题是我需要应用一个固定位置 header，默认情况下，我通过使用迄今为止在大多数情况下使用的简单脚本来实现。这是：

$(document).scroll(function () {
  var a = $(this).scrollTop()
  if (a > 5) {
$('header').addClass('headerSnap')
  } else {
    $('header').removeClass('headerSnap')
  }
});

我只是计算视口偏移量并告诉它使用固定位置将 class 附加到 header。但这里的问题是 fullpage.js 不允许我的简单脚本检测偏移量，因此 class 没有被应用。

我该怎么做才能绕过这个问题？

Answer 1

设法自己解决了，我只是从其设置中添加了一个滚动条，如下所示：

$(document).ready(function() {
    $('#fullpage').fullpage({
      scrollBar: true,
    });
});

我的脚本就是这样工作的，因为它有一个滚动条。

NOTE: This answers my specific question, which is not an overall solution for fixed headers. Please re-read my first post for further information on this.

Answer 2

onLeave 使用 nextIndex 参数你可以 addClass 或 removeClass

<div id="main-section">
   <div class="section-one">Sectioin 1</div>
   <div class="section-two">Sectioin 2</div>
   <div class="section-three">Sectioin 3</div>
</div>

<script type="text/javascript">
    jQuery(document).ready(function(){
         jQuery('#main-section').fullpage({
            sectionsColor: ['red', 'orange', 'yellow'],
              onLeave: function(index, nextIndex, direction){        
                  console.log(nextIndex);
                    if(nextIndex == 1){
                        jQuery('header').removeClass('headerSnap');
                    }else{
                       jQuery('header').addClass('headerSnap');     
                    }
               }
         });
    });
    </script>

第二个选项是每个主要部分你可以添加一个 class 名称然后你可以通过 setInterval 和 hasClass

检测部分

<script type="text/javascript">
    jQuery(document).ready(function(){
         jQuery('#main-section').fullpage({
              sectionsColor: ['red', 'orange', 'yellow'],
          });

        setInterval(function() {
          if(jQuery('.section-one').hasClass('fp-completely')){
             alert('section 1');
          }
          if(jQuery('.section-two').hasClass('fp-completely')){
             alert('section 2');
          }
        }, 500);
    });
    </script>

fullpage.js 如何检测垂直滚动

fullpage.js how to detect vertical scrolling

javascript

jquery

fullpage.js