0

第一次使用 jquery-scrollify。我有一个带有边框的页面，每个部分都从页面顶部开始 24px，因此它从边框下方开始。没有滚动我的 CSS 就可以了。一旦我实现了滚动化，即使使用了正确的偏移选项，页面也总是滚动的，因此第一部分的顶部就在页面的顶部。一旦我开始滚动到较低的部分，他们就会尊重偏移并正确对齐。第一部分似乎忽略了偏移选项？有什么方法可以使偏移量应用于页面的第一部分/开头？

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，而不是在顶部，否则它会在框架下方。

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

4

4 回答 4

0

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

解决方案示例 
$(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
    }

})
});
于 2018-04-27T16:47:05.237 回答
0

更改 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
于 2019-11-14T16:23:11.933 回答
0 
$.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})
}

});

删除第二部分的偏移量

于 2018-10-07T19:12:10.963 回答
0

我尝试了下面的解决方案，但最后我只是在标题或导航栏<header class="slide navbar otherclasses..."></header>（ .

编辑：你需要设置，setHeights: false否则它不能很好地工作。

于 2021-09-10T09:33:23.397 回答