Возможно с помощью getBoundingClientRect ()
Итерацию через проделанные элементы и проверку
function getMostVisibleElement(selector) {
var clientRect = null;
var clientRectTop = 0;
var maxVisibleHeight = 0;
var visibleHeightOfElem = 0;
var mostVisibleElement = null;
var skipRest = false;
var visibleElems = $(selector).each(function(i, element) {
if (skipRest === false) {
clientRect = element.getBoundingClientRect();
clientRectTop = Math.abs(clientRect.top);
if (clientRect.top >= 0) {
visibleHeightOfElem = window.innerHeight - clientRectTop;
} else {
visibleHeightOfElem = clientRect.height - clientRectTop;
}
if (visibleHeightOfElem >= clientRect.height) {
mostVisibleElement = element;
skipRest = true;
} else {
if (visibleHeightOfElem > maxVisibleHeight) {
maxVisibleHeight = visibleHeightOfElem;
mostVisibleElement = element;
}
}
}
});
return mostVisibleElement;
}
$(window).on('click', function() {
var mostVisible = getMostVisibleElement('.my-container');
$(mostVisible).addClass('highlighted');
setTimeout(function() {
$(mostVisible).removeClass('highlighted');
}, 200);
// alert(mostVisible.id)
});
.my-container {
height: 100vh;
}
#a {
background: #007bff;
}
#b {
background: #28a745;
height: 70vh;
}
#c {
background: #ffc107;
}
#d {
background: #17a2b8;
}
.highlighted {
background: #dc3545 !important;
}