如何设置 jQuery 断点？答案

【问题标题】：How to set jQuery breakpoints?如何设置 jQuery 断点？
【发布时间】：2019-08-26 18:41:18
【问题描述】：

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

由于我刚开始使用 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)
    })
}}

有什么想法吗？

【问题讨论】：

你只需检查浏览器的width()或者你可以使用Math.max( document.documentElement.clientWidth, window.innerWidth )
我是一个完全的 JS / jQ 初学者。我应该如何把它放在代码中？在哪里？
将该 Math.max 行放入一个函数中，然后调用该函数并与您的断点宽度进行比较。类似if( myGetWidthFunction() < 1024 ) { .... }

标签： javascript jquery html css breakpoints

【解决方案1】：

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

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

window.innerWidth

【讨论】：

【解决方案2】：

在 jQuery 中你可以这样写一个断点：

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

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

  }

【讨论】：

非常感谢 - 它有效！仅在 1024 没有像素 ;-)
您如何看待更通用的解决方案，即将导航的高度作为变量并从顶部减去？我尝试了这样的代码，但不幸的是它不起作用。 ``` $('.region').on('click', function () { var menuHeight = $(nav).height(); $('body, html').animate({ scrollTop: $(' .s1').offset().top-menuHeight }, 2000) }) ```