CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Em Ji Madhu
Em Ji Madhu

Reputation: 724

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.

Upvotes: 2

Views: 1505

Answers (2)

Lucas Lazaro
Lucas Lazaro

Reputation: 1526

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>

Upvotes: 3

Arsenalol69
Arsenalol69

Reputation: 13

You can calculate the offset of white elements and then compare that with the scroll value. Then if you are on that divs, you change your 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>

Upvotes: 0

Related Questions