Different offset for different sections in scrollify plugin

Question

I am using jQuery scrollify plugin on my website. It works great but I need to have custom offset for different areas of the page. For example all my section elements should have an offset of -200 while 2 footer elements should have an offset of -100px and -50px. This can't be achieved just by using interstitialSection. Can anyone please suggest a solution for this?

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" });
    }
});

score 0 · Answer 1 · answered Jul 28 '18 at 13:05

0

Try using the $.scrollify.setOptions() method to change the offset per section.

answered Jul 28 '18 at 13:05

Luke Haas

672
2
6
16

I tryed to use setOptions to update visibility of scrollbar and it doesn't work. It simply does anything. I wrote this :$.scrollify.setOptions({scrollbars: false}) even in console, and nothing happens... – Simona Adriani Nov 09 '18 at 10:31

score 0 · Answer 2 · edited Oct 17 '18 at 00:48

@Luke_Haass said that you have to use $.scrollify.setOptions(). I was reading the documentation and with .setOptions() method you can update the current scrollify options so try something like this. With before you can get the index of your next section that is going to change so in your if (indexPosition === section) use the $.scrollify.setOptions() to set a new options with your new offset!

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)

i hope this helps!

Different offset for different sections in scrollify plugin

2 Answers2