Targeting ein bestimmtes Nav Div in Code

Question

Ich habe den folgenden Code, der Klassen auf die <nav> Element angewendet wird. Der Code funktioniert so, keine Probleme da.

$(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'); 
    } 

}); 

}); 

aber ich zwei Elemente in meiner Website verwenden, so möchte ich nur den Code zu diesem speziellen nav

html

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

Wie gut, würde ich auch nur wie der Code anwenden gelten für dieses nav Element auf Bildschirmen> 768px

Answer 1

1/"der Code Möchten Sie auf diese spezifische nav anwenden" Wenn Sie möchten mehr Attribut (id, Klasse) nicht stimmen Sie verwenden können Attribute Equals Selector

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

2/" zu diesem nav Elemente auf Bildschirme> 768px“ Verweis auf diese` mit `$ ('# idName') answer

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

Answer 2

$('nav')[0] -> es identifiziert bestimmte Nav-Tag .. ohne ID können wir wie folgt angeben.

$(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'); 
    } 

}); 

});