Can't remove class on scroll after adding it on scroll

JavaScript
1

I’m using this plugin to detect if an element is visible or not on scroll. I am able to add the classes
just fine when I scroll and the element becomes visible. However, I am not able to remove the classes when
the elements become invisible.

https://www.customd.com/articles/13/checking-if-an-element-is-visible-on-screen-using-jquery

   <script>

	$(window).scroll(function() {
	
		var IsVisible = $('#ArticleHome').visible();

		if (IsVisible == true) {
			 $("#BuildWithAPurposeSec").addClass("animated slideInLeft");
			 $("#TargetImageSection").addClass("animated slideInRight");
		} else {
			 $("#BuildWithAPurposeSec").removeClass("animated slideInLeft");
			 $("#TargetImageSection").removeClass("animated slideInRight");
		}
		
		console.log(IsVisible);
		
	});
	
</script>
2

The equality operator goes like ==, or === for strict equality.

isVisible = true

however is not an expression which will evaluate to true or false, but a statement assigning the value true to the variable isVisible.

1 Like
3

So you’re saying I need to use == or === ?

I have since used console.log(IsVisible) and it is showing me that the value for IsVisible (I did correct the capitalization) is still evaluating to false. So it doesn’t make sense to me that it is still adding the classes on scroll.

4

Yes. Assigning IsVisible = true will also return true, which is the reason why the classes are getting added but never removed.

If the code is the same as in your edited OP, then this cannot be the case… either IsVisible is false or it is not. Sorry for the stupid question, but do you maybe have some sort of typo in your actual code?

5

I’m copying and pasting it again to update the code… I believe that this is the same code that I updated. Yes the fact that it is adding the classes but displaying false is what is confusing to me too.

6

One Correction. When I enter [quote=“BrianBam, post:1, topic:226648”]
if (IsVisible == true)
[/quote] it does not work.

It does work with the single = sign which is of course assigning the value true to IsVisible. I believe that my issue is getting the value of .visible

7

It does work for me though… here’s a fiddle.

8

That is so weird. I see that yours is working. I can see that IsVisible value changing for you in the console. I wonder why it isn’t changing for me. I put up a dev site. Maybe this will offer more insight. I can’t see any difference in the code though.
http://connect4web.staging.wpengine.com/

9

Oh, I thought that

… which would have been pretty weird indeed. ;-)

No, in this case it’s probably a limitation of the library. From their GitHub repo:

Currently, this plugin will not check for visibility in nested scrollable areas, only on the main viewport (window object).

Maybe this could be an issue here? Anyway, try this (quick and dirty) method instead:

$.fn.visible = function() {

    return $(this).offset().top < 
            $(window).scrollTop() + 
            $(window).height() &&
        $(this).offset().top + 
            $(this).height() > 
            $(window).scrollTop();
};

Here’s an updated fiddle. (Horizontal visibility can be implemented analogously, of course.)

BTW, having a look at their code, I find it a bit curious that they’re elaborately dealing with native methods and properties (such as a fallback for .getBoundingClientRect()), when jQuery has already taken care of all of this and they’re writing a jQuery plugin in the first place. Or to phrase it the other way round, the way they’ve written it they could just as well have written it for the Element.prototype w/o any need for jQuery. :-\

1 Like
10

This is working pretty good. It looks like you completely abandoned the plugin. The funny thing is that I was hoping that the plugin would be more efficient in the future. I guess it may be once it is updated some.

I was doing something similar to this on this page http://connect4web.staging.wpengine.com/services/ (see the ONLINE MARKETING header) and my code was quite long to have to do for each element I wanted to use it with.

For some reason this isn’t showing more code that I added. It’s just the jQuery that is on this page
http://connect4web.staging.wpengine.com/services/

I’m trying to understand the code that you wrote.

		// jquery .visible extension
	$.fn.visible = function() {
	
		return $(this).offset().top < 
				$(window).scrollTop() + 
				$(window).height() &&
			$(this).offset().top + 
				$(this).height() > 
				$(window).scrollTop();
				
				console.log($this);
	};

So with $.fn.visible you are creating a new function in jQuery, correct?

Then return $(this) is referring to that new function? or is return $(this) referring to the element (‘$ArticleHome’) here?
var IsVisible = $(‘#ArticleHome’).visible();

11

Yes, if you’d include both, one would overwrite the other. If you want to keep the other one as well, just rename that method appropriately.

Yes, this is referring to the current jQuery object here. jQuery methods would typically return this, which is why most of them are chainable – the next method is called on the object the previous method returned. If this case, of course, the method is returning a boolean and thus not further chainable with other jQuery methods. If you’re interested in how to write such custom methods, have a look here.

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.