CODEWITHSUNDEEP
javascriptmootools
Chad
Chad

Reputation: 1189

MooTools Fx.SmoothScroll() at min-screen width only

Is there a simple way to initialize Fx.SmoothScroll at a minimum screen width, and disable it below?

Ex, I only want the smooth scroll to happen above 400px.

Why, because a show/hide responsive menu is messing with the scroll target position, so JS is scrolling past the target.

UPDATE: I thought it would be better to actually measure the offset of the transitioning element, and set that in smooth scroll. I tried this, but it is not working.

            $$('#nav ul li a.menu')[0].addEvent('click', function(){
                window.offset = $('nav').getSize().y - 32;
                console.log(window.offset)
            });
            new Fx.SmoothScroll({
                offset: {
                    y: -window.offset
                }
            });

How would I update the offset on each click?

Upvotes: 0

Views: 74

Answers (1)

Chad
Chad

Reputation: 1189

After going the proper "responsive" route, I came up with this code.

            var theScroll = new Fx.Scroll(window);
            $$('#nav ul li a.menu')[0].addEvent('click', function(e){
                e.preventDefault();
                offset = $('nav').getSize().y - 32;
                theScroll.options.offset.y = -offset;
                theScroll.toElement($('menu'),'y');
            });

Upvotes: 1

Related Questions