到达 div 时更改 css 类和 jquery 函数

Question

我想在“A 类”到“B 类”的 DIV 时将一个类从“A 类”更改为“B 类”..

这就是我想要的东西，我在汉堡图标时有推送菜单。图标通常是带有黑框阴影的白色背景。我的整个网站背景都是黑暗的。所以它非常适合深色背景。

但是我很少有白色的 DIV，当我到达那个白色的 DIV 时，我的菜单几乎不可见。

所以我的问题是，当菜单到达白色背景 div 时，我想将菜单的类别从白色更改为黑色。我也想在 jquery 中更改该菜单的功能。因为我有一个“点击”功能来展开菜单。

这是 HTML：

$('.nav-trigger').on('click', function() {
    $(this).toggleClass('on');
    $('.nav-menu').fadeToggle(200);
});

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Advent Pro", sans-serif;
  overflow-x: hidden;
}

section {
  width: 100%;
  padding: 0 7%;
  display: table;
  margin: 0;
  max-width: none;
  background-color: #23222a;
  height: 100vh;
  color: #fff;
}

.content {
  display: table-cell;
  vertical-align: middle;
  color: #fff;
}

.nav-trigger {
  width: 30px;
  height: 30px;
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 20;
  cursor: pointer;
  -webkit-transition: top .1s ease-in-out;
  transition: top .1s ease-in-out;
}
.nav-trigger span {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  margin: 7px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
}
.nav-trigger span:first-child {
  top: 0;
  left: 0;
}
.nav-trigger span:nth-child(2) {
  width: 20px;
  top: 10px;
  left: 0;
}
.nav-trigger span:last-child {
  top: 20px;
  left: 0;
}
.nav-trigger .on {
  top: 10px;
}

.nav-trigger.on span:first-child {
  -webkit-transform: translateY(10px) rotate(45deg);
  transform: translateY(10px) rotate(45deg);
}

.nav-trigger.on span:nth-child(2) {
  -webkit-transform: translateX(50px);
  transform: translateX(50px);
  opacity: 0;
}

.nav-trigger.on span:last-child {
  -webkit-transform: translateY(-8px) rotate(-45deg);
  transform: translateY(-8px) rotate(-45deg);
}

.nav-trigger-dark {
  width: 30px;
  height: 30px;
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 20;
  cursor: pointer;
  -webkit-transition: top .1s ease-in-out;
  transition: top .1s ease-in-out;
}
.nav-trigger-dark span {
  display: block;
  width: 100%;
  height: 2px;
  background: #000;
  margin: 7px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.3);
}
.nav-trigger-dark span:first-child {
  top: 0;
  left: 0;
}
.nav-trigger-dark span:nth-child(2) {
  width: 20px;
  top: 10px;
  left: 0;
}
.nav-trigger-dark span:last-child {
  top: 20px;
  left: 0;
}
.nav-trigger-dark .on {
  top: 10px;
}

.nav-trigger-dark.on span:first-child {
  -webkit-transform: translateY(10px) rotate(45deg);
  transform: translateY(10px) rotate(45deg);
}

.nav-trigger-dark.on span:nth-child(2) {
  -webkit-transform: translateX(50px);
  transform: translateX(50px);
  opacity: 0;
}

.nav-trigger-dark.on span:last-child {
  -webkit-transform: translateY(-8px) rotate(-45deg);
  transform: translateY(-8px) rotate(-45deg);
}

.nav-menu {
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  z-index: 19;
  overflow: hidden;
}
.nav-menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  text-align: center;
  position: relative;
  -webkit-transition: opacity .35s, visibility .35s, height .35s;
  transition: opacity .35s, visibility .35s, height .35s;
}
.nav-menu ul a {
  position: relative;
  float: left;
  margin: 0;
  width: 25%;
  height: 100vh;
  text-align: center;
  cursor: pointer;
  background: #e65454;
  color: #fff;
  text-decoration: none;
}
@media (max-width: 30em) {
  .nav-menu ul a {
    width: 100%;
    height: 25vh;
  }
}
.nav-menu ul a li {
  position: absolute;
  text-transform: uppercase;
  font-family: "Advent Pro", sans-serif;
  top: 45%;
  left: 0;
  position: relative;
  -webkit-animation: fadeInRight .5s ease forwards;
  animation: fadeInRight .5s ease forwards;
}
@media (max-width: 30em) {
  .nav-menu ul a li {
    top: 25%;
  }
}
.nav-menu ul a h2.mb {
  -webkit-transition: -webkit-transform 0.35s;
  transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  transition: transform 0.35s, -webkit-transform 0.35s;
  margin-bottom: -20px;
  font-size: 2.25rem;
  /* 36/16 */
}
@media (max-width: 30em) {
  .nav-menu ul a h2.mb {
    font-size: 1.688rem;
    /* 27/16 */
  }
}
@media (min-width: 48em) and (max-width: 61.9375em) {
  .nav-menu ul a h2.mb {
    font-size: 2rem;
    /* 32/16 */
    margin-bottom: -13px;
  }
}
.nav-menu ul a h2.mt {
  -webkit-transition: -webkit-transform 0.35s;
  transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  transition: transform 0.35s, -webkit-transform 0.35s;
  margin-bottom: -73px;
  font-size: 2.25rem;
  /* 36/16 */
}
@media (max-width: 30em) {
  .nav-menu ul a h2.mt {
    font-size: 1.688rem;
    /* 27/16 */
  }
}
@media (min-width: 48em) and (max-width: 61.9375em) {
  .nav-menu ul a h2.mt {
    font-size: 2rem;
    /* 32/16 */
  }
}
.nav-menu ul a i {
  font-style: normal;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
  -webkit-transform: translate3d(0, -30px, 0);
  transform: translate3d(0, -30px, 0);
  font-size: 1.875rem;
  /* 30/16 */
}
@media (max-width: 30em) {
  .nav-menu ul a i {
    display: none;
  }
}
.nav-menu ul a:hover {
  background: #fff;
  color: #e65454;
}
.nav-menu ul a:hover h2 {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.nav-menu ul a:hover i {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.nav-menu ul a.active {
  background: #fff;
  color: #e65454;
}
.nav-menu ul a.active:hover {
  color: #000;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}
.bgwhite {
  background: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="nav-trigger">
			<span></span><span></span><span></span>
		</div>
		<div class="nav-menu">
			<ul>
				<a href="#"> <li><h2 class="mt">Home</h2><i>Go to</i></li></a>
				<a href="#"><li><h2 class="mb">About</h2><i>Me</i></li></a>
				<a href="#"><li><h2 class="mt">Work</h2><i>My</i></li></a>
				<a href="#"><li><h2 class="mb">Contact</h2><i>Me</i></li></a>
			</ul>
		</div>
<section>
  <div class="content">
    
    </div>
  </section>
<section class="bgwhite">
  <div class="content">
    
    </div>
  </section>

当我到达白色背景部分时，您可以在上面的片段中看到，我的汉堡菜单触发器几乎不可见..

我有一个名为“nav-trigger dark”的带有深色菜单的 css 类。

现在我想在那个 html 和那个 jquery 脚本中将“nav-trigger”类更改为“nav-trigger-dark”类。

Answer 1

我相信我理解你想要达到的效果。

在我的解决方案中，我监听文档上的 scroll 事件，当我到达新部分时，我检查该部分是否包含特定类，如果包含，我会更改导航栏类以匹配我想要显示的样式.

查看Fiddle 了解更多信息。

是这样的：

HTML：

<nav>
 <p class="js_header white">
   Text
 </p>
</nav>

<section class="bg-black"></section>
<section class="bg-white"></section>
<section class="bg-black"></section>
<section class="bg-white"></section>

CSS（重要部分）：

nav .white { 
  color: white;
}

nav .black { 
  color: black;
}

section.bg-black {
  background-color: black;
}

section.bg-white {
  background-color: white;
}

Javascript：

$(document).scroll(function (e) {
  $.each($('section'), function (index, section) {
    if($(this).scrollTop() >= section.getBoundingClientRect().top && $(this).scrollTop() <= section.getBoundingClientRect().bottom){
      if ($(section).hasClass('bg-black')) {
        $('.js_header').removeClass('black');      
        $('.js_header').addClass('white');      
      } else {
        $('.js_header').removeClass('white');      
        $('.js_header').addClass('black');
      }
    }
  });
});

---

更新：好的，我明白了您对 cme​​ts 的意思，为了在更改类时更改导航点击行为，您需要将侦听器添加到针对您想要的选择器的主体，而不是从一开始就绑定到特定的类。

JS 会这样改变点击行为：

$('body').on('click', '.nav-trigger', function() {
    alert('light clicked');
    $(this).toggleClass('on');
    $('.nav-menu').fadeToggle(200);
});

$('body').on('click', '.nav-trigger-dark', function() {
    alert('dark clicked');
    $(this).toggleClass('on');
    $('.nav-menu').fadeToggle(200);
});

我已将您的 sn-p 更改为以下内容：

$('body').on('click', '.nav-trigger', function() {
    alert('light clicked');
    $(this).toggleClass('on');
    $('.nav-menu').fadeToggle(200);
});

$('body').on('click', '.nav-trigger-dark', function() {
    alert('dark clicked');
    $(this).toggleClass('on');
    $('.nav-menu').fadeToggle(200);
});

$(document).scroll(function (e) {
      $.each($('section'), function (index, section) {
      	if($(this).scrollTop() >= section.getBoundingClientRect().top && $(this).scrollTop() <= section.getBoundingClientRect().bottom){
  		  if ($(section).hasClass('bgwhite')) {
            $('.js_navbar').removeClass('nav-trigger');      
            $('.js_navbar').addClass('nav-trigger-dark');
          } else {
            $('.js_navbar').removeClass('nav-trigger-dark');      
            $('.js_navbar').addClass('nav-trigger');   
          }
        }
      });
    });

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Advent Pro", sans-serif;
  overflow-x: hidden;
}

section {
  width: 100%;
  padding: 0 7%;
  display: table;
  margin: 0;
  max-width: none;
  background-color: #23222a;
  height: 100vh;
  color: #fff;
}

.content {
  display: table-cell;
  vertical-align: middle;
  color: #fff;
}

.nav-trigger {
  width: 30px;
  height: 30px;
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 20;
  cursor: pointer;
  -webkit-transition: top .1s ease-in-out;
  transition: top .1s ease-in-out;
}
.nav-trigger span {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  margin: 7px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
}
.nav-trigger span:first-child {
  top: 0;
  left: 0;
}
.nav-trigger span:nth-child(2) {
  width: 20px;
  top: 10px;
  left: 0;
}
.nav-trigger span:last-child {
  top: 20px;
  left: 0;
}
.nav-trigger .on {
  top: 10px;
}

.nav-trigger.on span:first-child {
  -webkit-transform: translateY(10px) rotate(45deg);
  transform: translateY(10px) rotate(45deg);
}

.nav-trigger.on span:nth-child(2) {
  -webkit-transform: translateX(50px);
  transform: translateX(50px);
  opacity: 0;
}

.nav-trigger.on span:last-child {
  -webkit-transform: translateY(-8px) rotate(-45deg);
  transform: translateY(-8px) rotate(-45deg);
}

.nav-trigger-dark {
  width: 30px;
  height: 30px;
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 20;
  cursor: pointer;
  -webkit-transition: top .1s ease-in-out;
  transition: top .1s ease-in-out;
}
.nav-trigger-dark span {
  display: block;
  width: 100%;
  height: 2px;
  background: #000;
  margin: 7px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.3);
}
.nav-trigger-dark span:first-child {
  top: 0;
  left: 0;
}
.nav-trigger-dark span:nth-child(2) {
  width: 20px;
  top: 10px;
  left: 0;
}
.nav-trigger-dark span:last-child {
  top: 20px;
  left: 0;
}
.nav-trigger-dark .on {
  top: 10px;
}

.nav-trigger-dark.on span:first-child {
  -webkit-transform: translateY(10px) rotate(45deg);
  transform: translateY(10px) rotate(45deg);
}

.nav-trigger-dark.on span:nth-child(2) {
  -webkit-transform: translateX(50px);
  transform: translateX(50px);
  opacity: 0;
}

.nav-trigger-dark.on span:last-child {
  -webkit-transform: translateY(-8px) rotate(-45deg);
  transform: translateY(-8px) rotate(-45deg);
}

.nav-menu {
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  z-index: 19;
  overflow: hidden;
}
.nav-menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  text-align: center;
  position: relative;
  -webkit-transition: opacity .35s, visibility .35s, height .35s;
  transition: opacity .35s, visibility .35s, height .35s;
}
.nav-menu ul a {
  position: relative;
  float: left;
  margin: 0;
  width: 25%;
  height: 100vh;
  text-align: center;
  cursor: pointer;
  background: #e65454;
  color: #fff;
  text-decoration: none;
}
@media (max-width: 30em) {
  .nav-menu ul a {
    width: 100%;
    height: 25vh;
  }
}
.nav-menu ul a li {
  position: absolute;
  text-transform: uppercase;
  font-family: "Advent Pro", sans-serif;
  top: 45%;
  left: 0;
  position: relative;
  -webkit-animation: fadeInRight .5s ease forwards;
  animation: fadeInRight .5s ease forwards;
}
@media (max-width: 30em) {
  .nav-menu ul a li {
    top: 25%;
  }
}
.nav-menu ul a h2.mb {
  -webkit-transition: -webkit-transform 0.35s;
  transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  transition: transform 0.35s, -webkit-transform 0.35s;
  margin-bottom: -20px;
  font-size: 2.25rem;
  /* 36/16 */
}
@media (max-width: 30em) {
  .nav-menu ul a h2.mb {
    font-size: 1.688rem;
    /* 27/16 */
  }
}
@media (min-width: 48em) and (max-width: 61.9375em) {
  .nav-menu ul a h2.mb {
    font-size: 2rem;
    /* 32/16 */
    margin-bottom: -13px;
  }
}
.nav-menu ul a h2.mt {
  -webkit-transition: -webkit-transform 0.35s;
  transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  transition: transform 0.35s, -webkit-transform 0.35s;
  margin-bottom: -73px;
  font-size: 2.25rem;
  /* 36/16 */
}
@media (max-width: 30em) {
  .nav-menu ul a h2.mt {
    font-size: 1.688rem;
    /* 27/16 */
  }
}
@media (min-width: 48em) and (max-width: 61.9375em) {
  .nav-menu ul a h2.mt {
    font-size: 2rem;
    /* 32/16 */
  }
}
.nav-menu ul a i {
  font-style: normal;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
  -webkit-transform: translate3d(0, -30px, 0);
  transform: translate3d(0, -30px, 0);
  font-size: 1.875rem;
  /* 30/16 */
}
@media (max-width: 30em) {
  .nav-menu ul a i {
    display: none;
  }
}
.nav-menu ul a:hover {
  background: #fff;
  color: #e65454;
}
.nav-menu ul a:hover h2 {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.nav-menu ul a:hover i {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.nav-menu ul a.active {
  background: #fff;
  color: #e65454;
}
.nav-menu ul a.active:hover {
  color: #000;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}
.bgwhite {
  background: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="nav-trigger js_navbar">
			<span></span><span></span><span></span>
		</div>
		<div class="nav-menu">
			<ul>
				<a href="#"> <li><h2 class="mt">Home</h2><i>Go to</i></li></a>
				<a href="#"><li><h2 class="mb">About</h2><i>Me</i></li></a>
				<a href="#"><li><h2 class="mt">Work</h2><i>My</i></li></a>
				<a href="#"><li><h2 class="mb">Contact</h2><i>Me</i></li></a>
			</ul>
		</div>
<section>
  <div class="content">
    
    </div>
  </section>
<section class="bgwhite">
  <div class="content">
    
    </div>
  </section>

Answer 2

您可以计算白色元素的偏移量，然后将其与滚动值进行比较。然后，如果你在那个 div 上，你改变你的 css ：

$(function() {
	var oTop = $('#blueDiv').offset().top - $('#blueDiv').outerHeight()  ;
    $(window).scroll(function(){
    
 		var pTop = $('body').scrollTop();
    	//console.log( pTop + ' - ' + oTop );
 		if( pTop > oTop && pTop<oTop + $('#blueDiv').outerHeight() + $('#navbar').outerHeight()  ){
     		white();
 		}else {
    	blue();
    }
	});
});

function white(){
	document.getElementById("navbar").className = "";
  document.getElementById("navbar").className = "navbar-white";
    //Add your code here
}

function blue(){
	document.getElementById("navbar").className = "";
  document.getElementById("navbar").className = "navbar-blue";
    //Add your code here
}

#navbar {
  position : fixed;
  top : 0px;
  height : 30px;
  width:100%;
  opacity:0.7;
  }
  #blueDiv {
    background-color : blue;
    height:30px;
  }
  .navbar-white {
  background-color: white;
  }
  
  .navbar-blue {
  background-color: blue;
  }
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar" class="navbar-blue">
menu
</div>
<p>&nbsp;s</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;s2</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;s3</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;s4</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

<div id="blueDiv">counter...</div>

<p>&nbsp;s</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;s2</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;s3</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;s4</p>
<p>&nbsp;</p>
<p>&nbsp;</p>