Get started with is-in-viewport CDN
MIT licensed
JS function Is-in-viewport checks elements visibility in browser viewport.
Tags:- viewport
- jquery
- jquery-plugin
Stable version
Copied!
How to start using is-in-viewport CDN
<!DOCTYPE html>
<html>
<head>
<title>Get started with is-in-viewport CDN - cdnhub.io</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.cdnhub.io/is-in-viewport/3.0.4/isInViewport.min.js"></script>
<script>
$(document).ready(function() {
function isElementInViewport(element) {
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
function checkElementInViewport(element) {
if (isElementInViewport(element)) {
console.log(`${element.id} is in the viewport.`);
} else {
console.log(`${element.id} is not in the viewport.`);
}
}
const element = document.getElementById("myElement");
checkElementInViewport(element);
$(window).on("scroll", function() {
checkElementInViewport(element);
});
$(window).on("resize", function() {
checkElementInViewport(element);
});
// Initialize isInViewport
$.isInViewport($("#myElement"), function(isInView, viewport) {
if (isInView) {
console.log("Element is in viewport now.");
}
});
});
</script>
<style>
#myElement {
width: 100px;
height: 100px;
background-color: red;
position: fixed;
bottom: 0;
left: 50%;
margin-left: -50px;
}
</style>
</head>
<body>
<div id="myElement"></div>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!