Em Ji Madhu Em Ji Madhu - 1 month ago 11
CSS Question

changing css class and a jquery function when it reaches a div

I want to change a class from "class A" to "Class B" when it reaches DIV of "Class A" to "Class B"..

Here is the thing what I want, I have push menu when hamburger icon. The icon is generally in white background with black box shadow. My whole website background is dark. So it is perfect for dark background.

But I have few DIVs which are in white, when I reach that white DIV my menu is hardly visible.

So my question is I want to change the class of my menu from white to black when it reaches white background div. And I want to change the function of that menu as well in jquery. Because I have a "click" function to expand the menu.

Here is the 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>





as you can see in the snippit above when i reach the white background section, my hamburger menu trigger is hardly visible..

I have a css class with dark menu in the name of "nav-trigger dark".

Now I want to change that "nav-trigger" class to "nav-trigger-dark" class in that html and in that jquery script as well.

Answer

I believe I understood the effect you're trying to achieve.

In my solution I listen to the scroll event on the document and when I reach a new section I check whether that section contains a particular class, if it does I alter my navbar class to match the style I want to display.

Check this Fiddle for more information.

It goes like this:

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 (the important part):

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

UPDATE: Ok I got what you mean on your comments, in order to change the nav click behaviour when changing the class you need to add the listener to the body targeting the selector you want, instead of binding to the specific class from the beginning.

The JS would go like this for the changing the click behaviour:

$('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);
});

I've altered your snippet to the following:

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

Comments