javascript - 如何设置 jQuery 断点？

Question

因为这是我的第一篇文章，所以在开始欢迎大家。

由于我刚刚开始使用 JS 和 jQuery，有人可以建议如何处理 jQuery 断点吗？

在网站上，我在 position: fixed 和 height: 200px 的顶部有一个菜单。在菜单中使用 jQuery 链接滚动到特定部分。所选部分转到页面顶部。

我在 CSS 中创建了断点，例如在 1024px 以下，菜单已经是 100px 高度。您是否知道如何在 jQuery 中转换规则，使 1024px 下方滚动到 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)
})

我尝试了下面的代码，但它不起作用。

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

有什么想法吗？

Answer 1

您可以使用 vanilla javascript 提取窗口大小

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

window.innerWidth