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

标签 javascript jquery html css

当一个类达到“Class A”到“Class B”的DIV时，我想将它从“class A”更改为“Class 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>

正如您在上面的代码片段中看到的那样，当我到达白色背景部分时，我的汉堡菜单触发器几乎不可见。

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

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

最佳答案

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

在我的解决方案中，我监听文档上的 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');
      }
    }
  });
});

更新:好的，我明白了您的评论的意思，为了在更改类时更改导航点击行为，您需要将监听器添加到针对您想要的选择器的正文中，而不是从一开始就绑定(bind)到特定的类。

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);
});

我已将您的代码片段更改为以下内容:

$('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>

关于javascript - 当到达 div 时更改 css 类和 jquery 函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39838713/

上一篇：html - Jade/Pug 模板引擎中不允许属性(点击)？

下一篇：jquery - Materialise slider 在 asp.net mvc 中不起作用

相关文章：

javascript - 将 for 循环中的数组推送到空的全局数组 - 用最后推送的项目填充全局？

javascript - jquery ui如何自动拖动元素

php - Ajax/PHP/MySQL 和运行代码

jquery - 在桌面 View 上看到的切换按钮

javascript - 从日历jquery获取日期

html - Rails 和 WiceGrid : HTML escape

javascript替换点(不是句点)字符

javascript - <select ng-options ="..."/> 问题

javascript - 本地存储问题

java - 如何在刷新时防止重复条目？

©2024 IT工具网  联系我们