I'm using this little gem from CSS Tricks to apply a class to elements once they appear in the viewport window, but it doesn't seem to be working with my WP based site...
(function($) {
$.fn.visible = function(partial) {
var $t = $(this),
$w = $(window),
viewTop = $w.scrollTop(),
viewBottom = viewTop + $w.height(),
_top = $t.offset().top,
_bottom = _top + $t.height(),
compareTop = partial === true ? _bottom : _top,
compareBottom = partial === true ? _top : _bottom;
return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
};
})(jQuery);
var win = $(window);
var allMods = $(".work-thumb");
allMods.each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("already-visible");
}
});
win.scroll(function(event) {
allMods.each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.addClass("come-in");
}
});
});
I can't for the life of me figure out what's going wrong.
Anyone have any ideas?
var win = $(window);should show up in your error console.$doesn't work with the WordPress version of jQuery, this should be showing up in your error console. most of the questions over in the related column to the right deal with this in one way or another, including this one you asked yourself.