javascript - 当元素在视口(viewport)中时应用选择器

Question

假设我在我的网站上使用以下代码

<div class="wrapper">

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

</div>

当一个对象带有选择器"wrapper"在视口(viewport)内，我想在 <nav> 中引用一个额外的选择器元素。

因此

当带有“wrapper”的元素在视口(viewport)中时，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>