javascript - 针对代码中的特定导航 div

Question

我有以下代码将类应用于 <nav>元素。代码有效，所以没有问题。

$(document).ready(function() {

$(window).scroll(function() {

    if ($(window).scrollTop() > 300) {
        $('nav').addClass('stick');
        $('nav').css('top','0');
    }

    if ($(window).scrollTop() < 300) {
        $('nav').removeClass('stick');
        $('nav').css('top', '0');
    }

});

});

但是我在我的网站中使用了两个元素，所以我只希望代码应用于这个特定的导航

html

<nav role="main-navigation">   ...  </nav>

同样，我也希望代码仅适用于此 nav屏幕上的元素 >768px

Answer 1

1/"想​​要代码应用到这个特定的导航"如果您不想添加更多属性(id、类)，您可以使用 Attribute Equals Selector

$("nav[role='main-navigation']").

2/“仅适用于屏幕上的此导航元素 >768px”引用这个answer

if (window.matchMedia('(min-width: 768px)').matches) {
    //...
} else {
    //...
}