Jump to content
Search Community

MediaQuery to offset ScrollToPlugin

tomektomczuk test
Moderator Tag

Recommended Posts

Hello Everyone,

 

how can I put a different [MEDIAQUERYVALUE] to below ScrollToPlugin function ?

 

function menuScrollToId() {

    // Detect if a link's href goes to the current page
    function getSamePageAnchor (link) {
        if (
            link.protocol !== window.location.protocol ||
            link.host !== window.location.host ||
            link.pathname !== window.location.pathname ||
            link.search !== window.location.search
        ) {
            return false;
        }

        return link.hash;
    }

// Scroll to a given hash, preventing the event given if there is one
    function scrollToHash(hash, e) {
        const elem = hash ? document.querySelector(hash) : false;
        if(elem) {
            if(e) e.preventDefault();
            gsap.to(window, 1, {scrollTo:{y:elem, offsetY: [MEDIAQUERYVALUE]}});
        }
    }

// If a link's href is within the current page, scroll to it instead
    document.querySelectorAll('a[href]').forEach(a => {
        a.addEventListener('click', e => {
            scrollToHash(getSamePageAnchor(a), e);
        });
    });

// Scroll to the element in the URL's hash on load
    scrollToHash(window.location.hash);
}

 

Link to comment
Share on other sites

For example, How can I use Media Query to set 90,120,160 as a variable that depend on screen size? 

 

"(min-width: 1280px) and (max-width: 1919px)"
gsap.to(window, 1, {scrollTo:{y:elem, offsetY: 90}});

"(min-width: 1920px) and (max-width: 2559px)"
gsap.to(window, 1, {scrollTo:{y:elem, offsetY: 120}});

"(min-width: 2560px)"
gsap.to(window, 1, {scrollTo:{y:elem, offsetY: 160}});

 

Is that more clear? 

Link to comment
Share on other sites

Use a function:

gsap.to(window, 1, {scrollTo:{y:elem, offsetY: () => {
  // Lots of ways of doing it in the function - using innerWidth or matchMedia
  // just make sure to return the value you need for the given viewport
  
  // for example
  return innerWidth < 2560 ? 
    innerWidth < 1920 ? 
      innerWidth < 1280 ? 0 : 90
    : 120 
  : 160
}}});

 

  • Like 1
Link to comment
Share on other sites

2 hours ago, ZachSaucier said:

Use a function:


gsap.to(window, 1, {scrollTo:{y:elem, offsetY: () => {
  // Lots of ways of doing it in the function - using innerWidth or matchMedia
  // just make sure to return the value you need for the given viewport
  
  // for example
  return innerWidth < 2560 ? 
    innerWidth < 1920 ? 
      innerWidth < 1280 ? 0 : 90
    : 120 
  : 160
}}});

 

Zach this doesn't work for me

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...