targeting a specific nav div in code

Question

I have the following code which applies classes to the <nav> element. The code works so no issues there.

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

});

});

however I use two elements in my website so I only want the code to apply to this specific nav

html

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

As well, I would also like the code to ONLY apply to this nav element on screens >768px

You could also target with `$('nav[role="main-navigation"]')` — Daniel Diekmeier, Jun 14 '17 at 10:30
_“As well, I would also like the code to ONLY apply to this nav element on screens >768px”_ - well then wrap it in a condition that checks the current window width ... — CBroe, Jun 14 '17 at 10:30
I wasn't sure if I needed to apply that condition around the entire function or inside based on the response — user3550879, Jun 14 '17 at 10:39

score 1 · Answer 1 · answered Jun 14 '17 at 10:29

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

});

});

score 1 · Accepted Answer · answered Jun 14 '17 at 10:42

1

1/ "Want the code to apply to this specific nav " If you don't want to add more attribute (id, class) you can use Attribute Equals Selector

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

2/ "ONLY apply to this nav element on screens >768px" Reference to this answer

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

answered Jun 14 '17 at 10:42

Kenny Nguyễn

26
3

I wasn't familiar with the $(nav[ ] ) but it works thanks – user3550879 Jun 14 '17 at 10:43

targeting a specific nav div in code

2 Answers2