Question

第一次使用jquery-scrollify。我有一个带有边框的页面，每个部分都是从页面顶部开始24px所以它从边框开始。没有滚动我的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偏移量是指我在页面顶部的固定位置框架。当一个新的＆＃34;部分＆＃34;滚动到顶部，它应该从页面顶部停止24px而不是在顶部，否则它将在框架下方停止。

第一个＆＃34;部分＆＃34;在我启动scrollify之前在正确的位置开始（我在包含元素上的CSS的顶部填充等于帧的高度）。但是，一旦添加了scrollify，页面就会向下滚动24px，以便第一个＆＃34;部分＆＃34;出现在页面顶部。＆＃34;偏移＆＃34;选项在所有后续部分进行更正（当我向下滚动时，第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
    }

})
});

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

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

3 个答案: