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元素＆gt; 768px

Answer 1

$('nav')[0] --> it identifies specific nav tag.. without using id we can specify like this.

$(document).ready(function() {

$(window).scroll(function() {

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

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

});

});

Answer 2

1 /＆＃34;希望代码适用于此特定导航＆＃34; 如果您不想添加更多属性（ID，类），可以使用Attribute Equals Selector

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

2 /＆＃34;仅适用于屏幕上的此导航元素＆gt; 768px＆＃34; 参考此answer

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

在代码中定位特定的nav div

2 个答案: