$.fn.visible = function (partial) { var $t = $(this), $w = $(window), viewTop = $w.scrollTop()+130, // 130 because fixed header 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; }; $(window).scroll(function (event) { $(".vertical-scrolling").each(function (i, el) { var el = $(el); if (el.visible(true)) { el.addClass("active"); } else { el.removeClass("active"); } });
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter