How to add a class when my fixed logo overlaps a certain div?

JavaScript
1

Hello all,

Thanks in advance for any help! So I have a fixed header and I need to
add a class to my logo when the logo overlaps a certain div. So the
whole time the logo is over top a certain div, a class is added to the
logo. Anyone help?

2

It would be good if you could set up a Pen to demonstrate the code you are working with.

3

Sure thing. Here’s a pen: http://codepen.io/icommstudios/pen/wMWwRB

I simply need add a class to the logo when it overlaps .container2 (green section) and then remove the class when it no longer overlaps. Make sense?

4

With jquery you could do something like this.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
*, *:before, *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
header {
	position: fixed;
	top:0px;
	left:0px;
	width: 100%;
	border: 2px dotted red;
	padding: 10px;
}
.container1 {
	background: blue;
	height: 400px;
}
.container2 {
	background: green;
	height: 400px;
}
.logo.over {
	outline:4px solid red;
	vertical-align:top;
}
</style>
</head>

<body>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<header class="header"> <a href="#" class="logo"><img src="http://placehold.it/100x55"></a>
  <h3>Fixed Header</h3>
   </header>
<div class="container1">Container 1 content</div>
<div class="container2">Container 2 content
</div>
<br>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script>
$(window).on('scroll', function() {
      getOffset();
});

function getOffset(){
	var logo = $('.logo');
	var offset1 = logo.offset().top;
	var offset2 = $('.container2').offset().top;	
	var height1 =  logo.height();
	var height2 =  $('.container2').height();
	if ((offset2 < (offset1 + height1)) && ((offset2 + height2) > offset1)){
		logo.addClass('over');
	} else {
		logo.removeClass('over');
	}
}
</script>
</body>
</html>

That adds a class to the logo when container2 is over the logo (not when container2 is over the header).

You may want to add a debounce function if this slows the page down.

You may also need to explain why you want to this in case its just a css stacking issue you were looking at. :wink:

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.