Menu
I am writing a script that gives different elements some animations when they appear in the screen.
Step one would be to detect when they come in the screen. But that doesn't seem to work.
What I tried:
-The .visible() selector, I quickly found out this does something else in jQuery.
-Different plugins, but I found that they do way more then I need, therefore I decided to write/ find something myself.
-My current script (I found it somewhere in a forum and decided to edit it to my needs) But It works a little strange.
$.fn.isInViewport = function () {
let elementTop = $(this).offset().top;
let elementBottom = elementTop + $(this).outerHeight();
let viewportTop = $(window).scrollTop();
let viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};
$(window).scroll(function () {
if ($('.blogcard ').isInViewport()) {
$(this).addClass("test");
console.log('success.')
} else {
console.log('No success.')
}
});
Unfortunately this doesn't seem to add a class to my <div class='blogcard'>.
856
To find the bottom position of element we have to add the height of the element to the elementTop variable. Luckily for us jQuery provides a method called outerHeight which allows us to find the height of element including border, padding and optionally padding. viewportTop: Top of the Viewport.
To find out if the whole element is inside of the viewport we can simply check if the top and left value is bigger or equal to 0, that the right value is less or equal to the viewport height ie window. innerWidth and that the bottom value is less or equal to window. innerHeight.
Answer: Use the jQuery :visible Selector You can use the jQuery :visible selector to check whether an element is visible in the layout or not. This selector will also select the elements with visibility: hidden; or opacity: 0; , because they preserve space in the layout even they are not visible to the eye.
The :visible selector in jQuery is used to select every element which is currently visible. It works upon the visible elements. The elements that are consuming space in the document are considered visible elements. The height and width of visible elements are larger than 0.
Your use of "this" targets window not .blogcard element:
$(window).scroll(function () {
if ($('.blogcard ').isInViewport()) {
// Use .blogcard instead of this
$('.blogcard').addClass('test');
console.log('success.')
} else {
// Remove class
$('.blogcard').removeClass('test');
console.log('No success.')
}
});
For future Googlers. The posted function has a bug, $(window).height() is not providing the viewport height, but rather the entire document height. This isInViewport function returns always true. This is the proper implementation:
$.fn.isInViewport = function () {
let elementTop = $(this).offset().top;
let elementBottom = elementTop + $(this).outerHeight();
let viewportTop = $(window).scrollTop();
let viewportBottom = viewportTop + window.innerHeight; // <-- here
return elementBottom > viewportTop && elementTop < viewportBottom;
};
You need to get the 'this' context into your $(window).scroll function. I did it by looping through elements, instead of just checking if a .class isInViewport()
$(window).scroll(function () {
$('.blogcard').each(function(i, el){
if ($(this).isInViewport()) {
$(this).addClass('test');
console.log('content block is in viewport.', $(this))
}
})
});
Removing the class was animating content around too much, so I took that out.
2
Please try this code ...
$(window).scroll(function () {
if ($('.section3 ').isInViewport()) {
$('.section3').addClass('its-now-view');
alert('sction 3 is now in viewport');
} else {
$('.section3').addClass('its-now-view');
alert('sction 3 is not in viewport');
}
});.section{
height:400px;
}
.section1{
background-color: #333;
}
.section2{
background-color: red;
}
.section3{
background-color: yellow;
}
.section4{
background-color: green;
}<html>
<head>
<title>Viewport demo</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/is-in-viewport/3.0.4/isInViewport.min.js"></script>
</head>
<body>
<div class="content-wrapper">
<div class="section section1">
<p>Content of section 1</p>
</div>
<div class="section section2">
<p>Content of section 2</p>
</div>
<div class="section section3">
<p>Content of section 3</p>
</div>
<div class="section section4">
<p>Content of section 4</p>
</div>
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
