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

Question

想象一下，我在我的网站上使用以下代码

<div class="wrapper">

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

</div>

当具有选择器"wrapper"的对象位于视口内时，我想在<nav>元素中引用其他选择器。

因此

当一个元素带有＆＃34;包装＆＃34;在视口中，HTML是

<div class="wrapper">

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

</div>

否则代码为

<div class="wrapper">

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

</div>

Answer 1

您是否尝试使用jQuery功能，如：

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>