There are times when you may want to add interactivity to your website based on the scroll position relative to an elements position but don’t want to use yet another jQuery plugin. This can be useful to check to see if an element has scrolled into view. So, below I’ve added a very simple function that accepts a jQuery selector string as its only parameter and then returns an object that contains position information about the desired element. All position attributes are boolean values so they can easily be used with conditional logic. The first is “visible” which will be set to true if the desired element is currently visible on the screen (partially or wholly). The second is “above” which will be set to true if the desired element is currently above what is\u00a0visible on the screen. The last is “below” which will be set to true if the desired element is currently below what is visible on the screen.<\/p>\n
function elementVisible(element) {\n\tvar returnValue = {};\n\tvar docViewTop = $(window).scrollTop();\n\tvar docViewBottom = docViewTop + $(window).height();\n\tvar elementTop = $(element).offset().top;\n\tvar elementBottom = elementTop + $(element).height();\n\t \n\treturnValue.visible = ((elementBottom >= docViewTop && elementBottom <= docViewBottom) || (elementTop <= docViewBottom && elementTop >= docViewTop) || (elementTop <= docViewTop && elementBottom >= docViewBottom));\n\treturnValue.above = (elementBottom < docViewTop);\n\treturnValue.below = (elementTop > docViewBottom);\n\t \n\treturn returnValue;\n}<\/pre>\nThis function can easily be used in combination with a the jQuery scroll method.<\/p>\n
(function($) {\n\tvar myDesiredElementVisibility;\n\t\n\t$(window).scroll(function(e) {\n\t\tvar myDesiredElementVisibility = elementVisible('#my-desired-element');\n\t\tif (myDesiredElementVisibility.visible) {\n\t\t\t\/\/ Element is visible\n\t\t}\n\t\tif (myDesiredElementVisibility.above) {\n\t\t\t\/\/ Element is above the view\n\t\t}\n\t\tif (myDesiredElementVisibility.below) {\n\t\t\t\/\/ Element is below the view\n\t\t}\n\t});\n})(jQuery);<\/pre>\n