Breakpointy w jQuery

Cześć,

Ponieważ to mój pierwszy post, zatem na początku witam wszystkich na forum.

Ponieważ dopiero raczkuję w JS i jQuery, może ktoś podpowie, jak poradzić sobie z breakpointami w jQuery?

Na stronce mam u góry przypięte menu w position fixed i height 200px. W menu podlinkowane przewijanie do konkretnego section za pomocą jQuery. Dokładnie wybrane section podjeżdża do góry strony.

Mój kod (to co wydało mi się istotne):

html

  <nav>
        <a class="region" href="#">Okolica</a>
      
    </nav>

 <section class="s1"> <section>

css

nav {
    height: 200px;

}

@media (max-width: 1024px) {
  

    nav {
        height: 100px;
    }
}

jQuery

$('.region').on('click', function () {
    $('body, html').animate({
        scrollTop: $('.s1').offset().top - 200
    }, 2000)
})

Sęk w tym, że utworzyłem w css breakpointy i np. poniżej 1024px menu ma już wysokość 100px. Macie pomysł, jak przerobić regułę w jQuery, aby poniżej 1024px przewijała się do "top - 100"?

W jednym z filmików na YT znalazłem coś takiego:

document.addEventListener('DOMContentLoaded', init);
function init(){
let query = window.matchMedia("(max-width: 1024px)");
if(query.matches){
    //co ma się wydarzyć
}}

i złożyłem to tak

document.addEventListener('DOMContentLoaded', init);
function init(){
let query = window.matchMedia("(max-width: 1024px)");
if(query.matches){
    $('.region').on('click', function () {
        $('body, html').animate({
            scrollTop: $('.s1').offset().top - 100
        }, 2000)
    })
}}

Niestety nie działa i .s1 nadal zatrzymuje się na top - 200.

Podrzuci ktoś jakiś pomysł?

Pozdrawiam

Sprawdzasz warunek raz podczas załadowania strony - dlatego nie działa. Musisz sprawdzić czy query pasuje tuż przed scrollowaniem - w callbacku onclicka.

if(query.matches){
    $('.region').on('click', function () {
        $('body, html').animate({
            scrollTop: $('.s1').offset().top - 100
        }, 2000)
    })
}}

Zła kolejność. W taki sposób po spełnieniu warunku do elementu zostanie dodany event, który zostanie wywołany już za każdym kliknięciem, nawet jeśli warunek już wtedy nie zostanie spełniony. Ja bym sprawdzanie warunku wrzucił wewnątrz funkcji, przed animate.

Dzięki,

udało mi się już rozkminić inaczej, ale wrzucam, może się komuś przyda:

if ($(window).width() < 1024px) {

    //YOUR FUNCTION FOR EXAMPLE
     $('.region').on('click', function () {
        $('body, html').animate({
            scrollTop: $('.s1').offset().top - 100
        }, 2000)
    })

  }