0

我在我的网站上使用 jQuery scrollify 插件。它工作得很好，但我需要为页面的不同区域设置自定义偏移量。例如，我所有的部分元素的偏移量应为 -200，而 2页脚元素的偏移量应为 -100px 和 -50px。这不能仅通过使用 interstitialSection 来实现。任何人都可以为此提出解决方案吗？

HTML

<header>
    ....
</header>
<section>
</section>
....
//removed for brevity
....
<footer class="contact">
</footer>
<footer class="social-footer">
</footer>

JS

$.scrollify({
    section: "header, section, footer",
    interstitialSection: "header, section, .contact, .social-footer", 
    offset: -200,
    //this doesn't seem to work
    before: function (indexPosition, snapToElm) {
        if (indexPosition === 1) {
            snapToElm[indexPosition].css({ "margin-top": "200px" });
        } else if (indexPosition === 2) {
            snapToElm[indexPosition].css({ "margin-top": "100px" });
        } else if (indexPosition === 3) {
            snapToElm[indexPosition].css({ "margin-top": "150px" });
        }
    },
    afterRender: function () {
        //Picked up from another source 
        //set the first element initially to the desired offset
        $($(this.section)[0]).css({ "margin-top": "200px" });
    }
});
4

2 回答 2

0

@Luke_Haass 说你必须使用$.scrollify.setOptions(). 我正在阅读文档，并且.setOptions()您可以通过方法更新当前的滚动选项，因此请尝试类似的方法。before您可以获得下一部分的索引，该索引将要更改，因此在您使用if (indexPosition === section)新$.scrollify.setOptions()偏移量设置新选项时！

var scrollifyOptions = {
        section: ".scroll , .scrollfull",
        sectionName: "section-name",
        interstitialSection: ".inters",
        easing: "easeOutExpo",
        scrollSpeed: 1500,
        offset: scrolloff,
        scrollbars: true,
        standardScrollElements: "",
        setHeights: false,
        overflowScroll: true,
        updateHash: true,
        touchScroll: true,
        before: function (index, sections) {
            if (index == 1) {
                scrollifyOptions.offset = 0;
                $.scrollify.setOptions(scrollifyOptions);
            }
            else if (index == 2) {
                scrollifyOptions.offset = -50;
                $.scrollify.setOptions(scrollifyOptions);
            }
        },
        after: function () { },
        afterResize: function () { },
        afterRender: function () { },
        offsets: function () { }
    }
    $.scrollify(scrollifyOptions)

我希望这有帮助！

于 2018-10-16T22:47:23.563 回答
0

尝试使用该$.scrollify.setOptions()方法更改每个部分的偏移量。

于 2018-07-28T13:05:43.833 回答