javascript - jQuery Scrollify - 第一部分忽略偏移量

Question

第一次使用 jquery-scrollify。我有一个带有边框的页面，每个部分都应该从页面顶部开始 24px，因此它从边框下方开始。如果没有 scrollify，我的 CSS 就可以做到这一点。一旦我实现了 scrollify，即使使用了正确的偏移选项，页面也会始终滚动，以便第一部分的顶部正好位于页面的顶部。一旦我开始滚动到较低的部分，它们就会遵守偏移量并正确对齐。似乎第一部分的偏移选项被忽略了？有什么方法可以使偏移量应用于页面的第一部分/开头？

HTML

<section class="hero-home">
  <div class="slide" style="background-image: url('/img/hero-home1.jpg')"></div>
  <div class="slide" style="background-image: url('/img/hero-home2.jpg')"></div>
  <div class="slide" style="background-image: url('/img/hero-home3.jpg')"></div>
  <div class="slide" style="background-image: url('/img/hero-home4.jpg')"></div>
</section>

JS

var scrollOffset = -24;

$.scrollify({
  section: ".slide:visible",
  offset: scrollOffset,
  easing: "easeOutQuint",
  scrollSpeed: 800,
  scrollbars: true,
  setHeights: false,
  updateHash: false,
  touchScroll: true
});

-24 偏移量是为了说明我在页面顶部的固定位置框架。当一个新的“部分”滚动到顶部时，它应该在距页面顶部 24 像素处停止，而不是在顶部停止，否则它会在框架下方。

第一个“部分”在我启动 scrollify 之前从正确的位置开始(我在包含元素上的 CSS 的顶部填充等于框架的高度)。但是，一旦添加了 scrollify，页面就会向下滚动 24px，以便第一个“部分”出现在页面顶部。 “偏移”选项会在所有后续部分中更正此问题(当我向下滚动时，第 2、第 3 和第 4 部分出现在正确的位置)但第 1 部分的初始位置不正确并忽略偏移选项值。

Answer 1

我也为这个问题苦苦挣扎，要解决这个问题，您需要在之前的事件中提供一些处理。

解决方案示例

$(document).ready(function() {
$.scrollify({
    section : ".fp-section",
    offset:-200,
    setHeights:false,

//Add the offset for the first element here:
//snapToElm is the list of element pages

    before:function(indexPosition,snapToElm){
        if(indexPosition===0){
            snapToElm[0].css({"margin-top":"200px"});
        }
        if(indexPosition>0){
            snapToElm[0].css({"margin-top":"0"});
        }
    },


    afterRender:function(){

     //set the first element initially to the desired offset
      $($(this.section)[0]).css({"margin-top":"200px"});
     //  stuff to do once scrollify has rendered the list
    }

})
});