How does one detect when a fixed element is over a div? In this case when the anchor is over .images
:
var fixedElement = $('a'),
images = $('.images'),
imagesTop = images.offset().top,
imagesLeft = images.offset().left,
imagesWidth = images.width(),
imagesHeight = images.height();
if(`fixedElement` is over `images`) {
fixedElement.addClass('active');
}
a {
position: fixed;
top: 0;
left: 0;
}
a.active {
font-weight: bold;
color: #aaa;
}
.images {
margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a>Hello world</a>
<div class="images">
<img src="http://placehold.it/200/200">
<img src="http://placehold.it/200/200">
<img src="http://placehold.it/200/200">
<img src="http://placehold.it/200/200">
<img src="http://placehold.it/200/200">
<img src="http://placehold.it/200/200">
<img src="http://placehold.it/200/200">
<img src="http://placehold.it/200/200">
<img src="http://placehold.it/200/200">
<img src="http://placehold.it/200/200">
<img src="http://placehold.it/200/200">
</div>
Came across Detect element if over another element via using CSS3 Transform but it looks way too complicated.
UPDATE: See kthornbloom's comment