CODEWITHSUNDEEP
javascripthtmlcssskrollr
Lizza
Lizza

Reputation: 2819

Can I use different skrollr anchor values depending on the width of the browser?

I am having difficulty making my desired skrollr animation occur exactly the way I want it to across different screen widths. I use media queries in my external stylesheet to adjust the layout of my page, and I need to have a different absolute value anchor for each width: desktop, tablet, and mobile.

I have searched online and through the skrollr documentation and haven't seen anything that will help me.

To be more clear, 'data-2415-start' works great in desktop, but because the view changes size in tablet, 2415 isn't the value I want for that width.

What can I do to achieve this level of precision across the different sizes?

UPDATE: Attempting to follow comment below

Am I on the right track with this?

<div data-_startAnchor-start = "top:0px;" data-2610-start = "top:-140px"></div>

skrollr.init({
    constants: {
        startAnchor: function() {

            var width = screen.width;
            var startAnchor;

            if (width > 800) {
                startAnchor = 2415;
            } else if (width > 600) {
                startAnchor = 2215;
            } else if (width > 400) {
                startAnchor = 2115;
            }

            return startAnchor;
        }
    }
 });

Upvotes: 0

Views: 1012

Answers (1)

Prinzhorn
Prinzhorn

Reputation: 22518

Attributes in HTML are case insensitive, which means you can't use upper case constants either. Apart from that, you did everything right (you should also handle < 400 though, instead of returning undefined).

<div data-_startanchor-start = "top:0px;" data-2610-start = "top:-140px"></div>

skrollr.init({
    constants: {
        startanchor: function() {

            var width = screen.width;
            var startAnchor;

            if (width > 800) {
                startAnchor = 2415;
            } else if (width > 600) {
                startAnchor = 2215;
            } else if (width > 400) {
                startAnchor = 2115;
            }

            return startAnchor;
        }
    }
});

Upvotes: 1

Related Questions