See the Pen
How to check if element is visible after scrolling using jQuery by satish mallick (@satishmallick)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<style>
*{font-family:arial;}
.largebox {height: 100000px;}
#msg{
position:fixed;left:0; top:0; right:0; text-align:center; width:100%; color:#fff; background:red; padding:10px 0; text-transform:uppercase;
}
#box1{
margin:60px 0 0;
}
h2{position:fixed;right:10px; bottom:10px;}
.scroll-down {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<body>
<div id="msg">FALSE</div>
<div class="scroll-down">Scroll Down</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="box1" class="box">box1</div>
<div class="largebox"></div>
<h2><a href="https://javascript-html-5.blogspot.com" target="_blank">Visit Our Blog</a></h2>
<script>
function isVisible($el) {
var winTop = $(window).scrollTop();
var winBottom = winTop + $(window).height();
var elTop = $el.offset().top;
var elBottom = elTop + $el.height();
return ((elBottom<= winBottom) && (elTop >= winTop));
}
$(function() {
$(window).scroll(function() {
$("#msg").text(isVisible($("#box1").css('background-color','blue')));
});
});
</script>
</body>
</html>
Hello,
No comments:
Post a Comment