Question

我正在构建一个包含几个＆＃34;阶段的页面＆＃34; fullpage.js 插件提供的内容。

我的主要问题是我需要应用一个固定的位置标头，默认情况下我使用的是一个简单的脚本，我目前用于大多数情况。这是：

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

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

我可以做些什么来绕过这个问题？

Answer 1

管理为自己排序，我只是从其设置中添加了一个滚动条，如下所示：

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

这样我的脚本就可以了，因为它有一个scollbar可供使用。

注意：这会回答我的 特定问题 ，这不是固定标头的整体解决方案。请重新阅读我的第一篇文章，了解更多相关信息。

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>

第二个选项是每个主要部分你可以添加一个类名，然后你可以通过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如何检测垂直滚动

2 个答案: