Question

我在我的网站上使用jQuery scrollify插件。效果很好，但我需要为页面的不同区域设置自定义偏移量。例如，我所有的 section 元素应具有-200的偏移量，而2个 footer 元素应具有-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" });
    }
});

Answer 1

尝试使用$.scrollify.setOptions()方法来更改每节的偏移量。

Answer 2

@Luke_Haass说您必须使用$.scrollify.setOptions()。我正在阅读文档，并使用.setOptions()方法可以更新当前的scrollify选项，因此请尝试类似的操作。使用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)

我希望这会有所帮助！

scrollify插件中不同部分的不同偏移量

2 个答案: