当元素在视口中时应用选择器

Question

Imagine I'm using the following code on my website

<div class="wrapper">

<nav class="main-nav">
Hello, I am navigation
</nav>

</div>

When an object with the selector "wrapper" is within the viewport, I would like to reference an additional selector in the <nav> element.

Therefore

When an element with "wrapper" is in the viewport, the HTML is

<div class="wrapper">

<nav class="main-nav in-view">
Hello, I am navigation
</nav>

</div>

Otherwise the code is

<div class="wrapper">

<nav class="main-nav">
Hello, I am navigation
</nav>

</div>

Answer 1

Have you tried using a jQuery function like:

 if ($(".wrapper").length) { /* Checks if wrapper exists */ $(".main-nav").addClass("in-view"); } 

 .in-view { color: red; } 

 <div class="wrapper"> <nav class="main-nav"> Hello, I am navigation </nav> </div> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>