CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Theodore Steiner
Theodore Steiner

Reputation: 1605

Multiple Window Events - Jquery

I'm trying to write a function that watches the window for a few things:

  1. If the window is greater-than 900px and the window is scrolled passed 100 add a BG color to the nav
  2. If the nav is scrolled passed 100 and the window is resized to less-than 900px change the BG color nav.

I've written two functions that should be doing the trick. My problem is my functions work right up until you scroll passed 100 and resize the screen: they won't apply the second class with the second bg color.

Snippet below. Can anyone provide assistance?

$(document).ready(function() {
	
	$(window).scroll(function() {
		
		var scroll = $(window).scrollTop();
		var nav = $('nav');
		
		if( scroll > 100 ) {
			nav.addClass('scrolled');
		} else {
			nav.removeClass('scrolled');
		}
	});
	
	
	
	$(window).resize(function() {
		var mq = window.matchMedia('(min-width: 100px) and (max-width: 900px)');
		
		if( mq.matches && $('nav').hasClass('scrolled')) {
			$('nav').removeClass('scrolled');
			console.log("Working");
			$('nav').addClass('scrolledTwo');
		} else {
			console.log("Not working");
			$('nav').removeClass('scrolledTwo');
		}
	});
	
	
});
* {
	padding: 0;
	margin: 0;
}

nav {
	height: 70px;
	width: 100%;
	border: 1px solid;
	transition: all .2s ease;
	background-color: transparent;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
}

.nav-fixedWidth {
	height: inherit;
	width: 1000px;
	margin: 0 auto;
	border: 1px solid #ccc;
}

main {
	width: 100%;
	height: 2000px;
	border: 1px solid;
	background-color: #f1f1f1;
}



.scrolled {
	background-color: red;
}

.scrolledTwo {
	background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
	<div class="nav-fixedWidth"></div>
</nav>

<main></main>

Upvotes: 0

Views: 275

Answers (1)

Sanchit Patiyal
Sanchit Patiyal

Reputation: 4920

Your code is working fine it is even applying the second class with the second bg color if you will resize slowly your window. The only issue is this if( mq.matches && $('nav').hasClass('scrolled')) condition. As you have mentioned $('nav').hasClass('scrolled') so first time when you will resize it will be true and then 

$('nav').removeClass('scrolled');
console.log("Working");
$('nav').addClass('scrolledTwo');

this will apply scrolledTwo class to nav. After that when you will further resize it will never pass this if( mq.matches && $('nav').hasClass('scrolled')) condition, until you don't resize the screen width to less than 100px or greater than 900px and scroll, and will always goto else and you will always see the red color. Try removing it

$(document).ready(function() {
	
	$(window).scroll(function() {
		
		var scroll = $(window).scrollTop();
		var nav = $('nav');
		
		if( scroll > 100 ) {
			nav.addClass('scrolled');
		} else {
			nav.removeClass('scrolled');
		}
	});
	
	
	
	$(window).resize(function() {
		var mq = window.matchMedia('(min-width: 100px) and (max-width: 900px)');
		
		if( mq.matches ) {
			$('nav').removeClass('scrolled');
			console.log("Working");
			$('nav').addClass('scrolledTwo');
		} else {
			console.log("Not working");
			$('nav').removeClass('scrolledTwo');
		}
	});
	
	
});
* {
	padding: 0;
	margin: 0;
}

nav {
	height: 70px;
	width: 100%;
	border: 1px solid;
	transition: all .2s ease;
	background-color: transparent;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
}

.nav-fixedWidth {
	height: inherit;
	width: 1000px;
	margin: 0 auto;
	border: 1px solid #ccc;
}

main {
	width: 100%;
	height: 2000px;
	border: 1px solid;
	background-color: #f1f1f1;
}



.scrolled {
	background-color: red;
}

.scrolledTwo {
	background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
	<div class="nav-fixedWidth"></div>
</nav>

<main></main>

Another issue in your code is if I scroll and resize the screen width between 100 to 900 and then again resize it to out of this window then there is no class assigned to your div and that is due to no class added in else of resize function. Changing that to this will do that trick also :)

else {
        console.log("Not working");
        $('nav').removeClass('scrolledTwo');
        var scroll = $(window).scrollTop();
       if( scroll > 100 ) {
         $('nav').addClass('scrolled');
       }
  }

Upvotes: 1

Related Questions