How to set jQuery breakpoints?

Question

Because this is my first post, so in the beginning welcome everyone.

Since I'm just starting in JS and jQuery, can someone suggest how to deal with jQuery breakpoints?

On the website, I have a menu at the top in position: fixed and height: 200px . In the menu linked to scroll to a specific section using jQuery. The selected section goes to the top of the page.

I have created breakpoints in CSS and eg below 1024px , the menu is already 100px hight. Do you have an idea on how to convert a rule in jQuery, so that below 1024px scrolls to top - 100 ?

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

    </nav>

 <section class="s1"> <section>

nav {
    height: 200px;

}

@media (max-width: 1024px) {

    nav {
        height: 100px;
    }
}

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

I tried code below but it doesn't work.

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

Any ideas?

Answer 1

you can extract the window size with vanilla javascript

https://developer.mozilla.org/en-US/docs/Web/API/window/innerWidth

window.innerWidth

Answer 2

In jQuery you can write a breakpoint like this:

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

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

  }