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偏移量是为了说明我在页面顶部有一个固定位置的框架。当一个新的“部分”滚动到顶部时，它应该从页面顶部停止24px，而不是直接在顶部，否则它会在框架下。

在我启动scrollify之前，第一个“部分”在正确的位置开始(我的CSS在一个包含元素上的顶部填充等于框架的高度)。然而，一旦添加了scrollify，页面就会向下滚动24px，这样第一个“部分”就会出现在页面的顶部。" offset“选项纠正了所有后续部分的这一点(当我向下滚动时，第二、第三和第四部分出现在正确的位置)，但第一部分的初始位置不正确，并忽略了偏移选项值。

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
    }

})
});

Answer 2

$.scrollify({
        section: "section",
        interstitialSection: ".fourth-view,footer",
        easing: "easeOutExpo",
        scrollSpeed: 1100,
        offset:0,
        scrollbars: true,
        standardScrollElements: "",
        setHeights: false,
        overflowScroll: true,
        updateHash: false,
        touchScroll: true,
        before: function () {
        },
        after: function () {
        },
        afterResize: function () {
        },
        afterRender: function () {
        }
    });
    if ($.scrollify.current().hasClass('second-view')) {
        $.scrollify.setOptions({offset: 0})
    }
    else {
        $.scrollify.setOptions({offset: -64.5})
    }

而且还

$(window).on('scroll', function () {
if ($.scrollify.current().hasClass('second-view')) {
    $.scrollify.setOptions({offset: 0})
}
else {
    $.scrollify.setOptions({offset: -64.5})
}

})；

删除第二个截面的偏移

Answer 3

更改jquery.scrollify.js的源代码行660

if(i>0) {
heights[i] = parseInt($this.offset().top) + settings.offset;
} else {
  heights[i] = parseInt($this.offset().top);
}

更改为

heights[i] = parseInt($this.offset().top) + settings.offset;

• jQuery Scrollify的版本是1.0.20