🕷️ Crawler Inspector

URL Lookup

Direct Parameter Lookup

Raw Queries and Responses

1. Shard Calculation

Query:

Response:

Calculated Shard: 77 (from laksa017)

2. Crawled Status Check

Query:

curl -X POST \
  'http://laksa077.int.ahrefs:8124/' \
  -H 'Content-Type: text/plain' \
  -H 'X-ClickHouse-Database: crawler3' \
  -H 'Authorization: Basic YXBpOg==' \
  -d 'SELECT getAhrefsURLFromUnparsed(src_unparsed) AS found_url, ifNull(toUnixTimestamp(download_stamp), 0) AS crawl_time, ifNull(toUnixTimestamp(props_url_first_seen), 0) AS first_indexed_time, download_http_code AS http_code, src_unparsed AS src_unparsed, src_root_hash AS src_root_hash, history_drop_reason AS history_drop_reason, meta_title AS meta_title, meta_descriptions AS meta_descriptions, attrs_boilerpipe_text AS attrs_boilerpipe_text, attrs_markdown AS attrs_markdown, attrs_readable_markdown AS attrs_readable_markdown, meta_canonical AS meta_canonical FROM crawler3.page_info_local FINAL PREWHERE (src_root_hash, src_unparsed) IN ((getAhrefsRootHashFromUnparsed(getAhrefsUnparsedNoserviceFromURL(\'https://medium.com/talk-like/detecting-if-an-element-is-in-the-viewport-jquery-a6a4405a3ea2\')), getAhrefsUnparsedNoserviceFromURL(\'https://medium.com/talk-like/detecting-if-an-element-is-in-the-viewport-jquery-a6a4405a3ea2\'))) FORMAT JSONEachRow'

Response:

{"found_url":"https:\/\/medium.com\/talk-like\/detecting-if-an-element-is-in-the-viewport-jquery-a6a4405a3ea2","crawl_time":1776023665,"first_indexed_time":1511757650,"http_code":200,"src_unparsed":"com,medium!\/talk-like\/detecting-if-an-element-is-in-the-viewport-jquery-a6a4405a3ea2 s443","src_root_hash":"13179037029838926277","history_drop_reason":null,"meta_title":"Detecting if an element is in the Viewport : jQuery | by Boy with Silver Wings | Talk Like | Medium","meta_descriptions":["Detecting if an element is in the Viewport : jQuery Detect if an element is visible in the view port. Now why would any one in the right mind want to do that? Well you are reading this, so may be you …"],"attrs_boilerpipe_text":"2 min read\nJan 1, 2017\nDetect if an element is visible in the view port. Now why would any one in the right mind want to do that? Well you are reading this, so may be you know why.\nPress enter or click to view image in full size\nSmall Experiment on Codepen\nI have to warn you that there are already plugins that help us do the same with jQuery like\nhttps:\/\/github.com\/customd\/jquery-visible\nhttp:\/\/www.appelsiini.net\/projects\/viewport\nWhile all these exist, how many plugins shall we ship with our website? How is the user going to cache them all? Let’s take a peek into how this is done.\nPS: I’m not going to be talking about jQuery :visible selector. This selector selects elements based on display CSS property or opacity.\nWe are going to be discussing how to detect if an element is visible on screen in real time.\nHere is a codepen demo of what we will be doing.\nThis started with\nthis question\non Stackoverflow for which my answer is\nhere\n.\nIt has been made to suit the question with some borrowed code from\nthis stackoverflow answer\n.\nGet Boy with Silver Wings’s stories in your inbox\nJoin Medium for free to get updates from this writer.\nRemember me for faster sign in\nEnough with the How I got here lesson. Getting to the JS part.\n$.fn.isInViewport = function() {\nvar elementTop = $(this).offset().top;\nvar elementBottom = elementTop + $(this).outerHeight();\nvar viewportTop = $(window).scrollTop();\nvar viewportBottom = viewportTop + $(window).height();\nreturn elementBottom > viewportTop && elementTop < viewportBottom;\n};\nThis forms the part of JS that concerns us most. To check if an element is in the viewport, we need four variables.\nThese being:\nelementTop : Top position of the element.\noffset function is used to find the position relative to parent element(body in this case) and top refers to the distance from the top.\nelementBottom: Bottom position of element\nTo 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\nouterHeight\nwhich allows us to find the height of element including border, padding and optionally padding.\nviewportTop: Top of the Viewport\nCan be found with the\nscrollTop\nfunction on window object. Conveniently returns the relative position from the scrollbar position to object matched, which in this case is our window.\nviewportBottom: Bottom of Viewport\nSame as elementBottom. We add height of window to the viewportTop to find bottom.\nAll that is left is to find if the element is within the window coordinates.\n]\n$(window).on(‘resize scroll’, function() {\n\/\/Code here\n});\nBy wrapping the elements required on a resize, scroll event, we have successfully build the platform to find if an element is in the viewport or not.\nHappy Coding","attrs_markdown":"[Sitemap](https:\/\/medium.com\/sitemap\/sitemap.xml)\n\n[Open in app](https:\/\/play.google.com\/store\/apps\/details?id=com.medium.reader&referrer=utm_source%3DmobileNavBar&source=post_page---top_nav_layout_nav-----------------------------------------)\n\nSign up\n\n[Sign in](https:\/\/medium.com\/m\/signin?operation=login&redirect=https%3A%2F%2Fmedium.com%2Ftalk-like%2Fdetecting-if-an-element-is-in-the-viewport-jquery-a6a4405a3ea2&source=post_page---top_nav_layout_nav-----------------------global_nav------------------)\n\n[Medium Logo](https:\/\/medium.com\/?source=post_page---top_nav_layout_nav-----------------------------------------)\n\nGet app\n\n[Write](https:\/\/medium.com\/m\/signin?operation=register&redirect=https%3A%2F%2Fmedium.com%2Fnew-story&source=---top_nav_layout_nav-----------------------new_post_topnav------------------)\n\n[Search](https:\/\/medium.com\/search?source=post_page---top_nav_layout_nav-----------------------------------------)\n\nSign up\n\n[Sign in](https:\/\/medium.com\/m\/signin?operation=login&redirect=https%3A%2F%2Fmedium.com%2Ftalk-like%2Fdetecting-if-an-element-is-in-the-viewport-jquery-a6a4405a3ea2&source=post_page---top_nav_layout_nav-----------------------global_nav------------------)\n\n![](https:\/\/miro.medium.com\/v2\/resize:fill:32:32\/1*dmbNkD5D-u45r44go_cf0g.png)\n\n[Talk Like](https:\/\/medium.com\/talk-like?source=post_page---publication_nav-7751dd6af89c-a6a4405a3ea2---------------------------------------)\n\n·\n\nFollow publication\n\n[![Talk Like](https:\/\/miro.medium.com\/v2\/resize:fill:38:38\/1*6JeXXld2mxuarRmR67UNpQ.jpeg)](https:\/\/medium.com\/talk-like?source=post_page---post_publication_sidebar-7751dd6af89c-a6a4405a3ea2---------------------------------------)\n\nA Matter of Space and Time\n\nFollow publication\n\n1\n\n# Detecting if an element is in the Viewport : jQuery\n[![Boy with Silver Wings](https:\/\/miro.medium.com\/v2\/resize:fill:32:32\/1*i-pR-xLX7Fyvri2Fcut9qw.jpeg)](https:\/\/medium.com\/@agney?source=post_page---byline--a6a4405a3ea2---------------------------------------)\n\n[Boy with Silver Wings](https:\/\/medium.com\/@agney?source=post_page---byline--a6a4405a3ea2---------------------------------------)\n\nFollow\n\n2 min read\n\n·\n\nJan 1, 2017\n\n1\\.3K\n\n13\n\n[Listen](https:\/\/medium.com\/m\/signin?actionUrl=https%3A%2F%2Fmedium.com%2Fplans%3Fdimension%3Dpost_audio_button%26postId%3Da6a4405a3ea2&operation=register&redirect=https%3A%2F%2Fmedium.com%2Ftalk-like%2Fdetecting-if-an-element-is-in-the-viewport-jquery-a6a4405a3ea2&source=---header_actions--a6a4405a3ea2---------------------post_audio_button------------------)\n\nShare\n\nDetect if an element is visible in the view port. Now why would any one in the right mind want to do that? Well you are reading this, so may be you know why.\n\nPress enter or click to view image in full size\n\n![](https:\/\/miro.medium.com\/v2\/resize:fit:700\/1*ErXwPjnEwghWwqwdCtxaMg.jpeg)\n\nSmall Experiment on Codepen\n\nI have to warn you that there are already plugins that help us do the same with jQuery like\n\n1. <https:\/\/github.com\/customd\/jquery-visible>\n2. <http:\/\/www.appelsiini.net\/projects\/viewport>\n\nWhile all these exist, how many plugins shall we ship with our website? How is the user going to cache them all? Let’s take a peek into how this is done.\n\nPS: I’m not going to be talking about jQuery :visible selector. This selector selects elements based on display CSS property or opacity.\n\nWe are going to be discussing how to detect if an element is visible on screen in real time.\n\nHere is a codepen demo of what we will be doing.\n\nThis started with [this question](http:\/\/stackoverflow.com\/questions\/41416863\/changing-color-when-specific-div-is-visible) on Stackoverflow for which my answer is [here](http:\/\/stackoverflow.com\/a\/41417072\/4374566).\n\nIt has been made to suit the question with some borrowed code from [this stackoverflow answer](http:\/\/stackoverflow.com\/a\/33979503\/4374566).\n\n## Get Boy with Silver Wings’s stories in your inbox\nJoin Medium for free to get updates from this writer.\n\nSubscribe\n\nSubscribe\n\nRemember me for faster sign in\n\nEnough with the How I got here lesson. Getting to the JS part.\n```\n$.fn.isInViewport = function() {\nvar elementTop = $(this).offset().top;\nvar elementBottom = elementTop + $(this).outerHeight();var viewportTop = $(window).scrollTop();\nvar viewportBottom = viewportTop + $(window).height();return elementBottom > viewportTop && elementTop < viewportBottom;\n};\n```\nThis forms the part of JS that concerns us most. To check if an element is in the viewport, we need four variables.  \nThese being:\n\n- elementTop : Top position of the element.\n- offset function is used to find the position relative to parent element(body in this case) and top refers to the distance from the top.\n- elementBottom: Bottom position of element\n- 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](http:\/\/api.jquery.com\/outerheight\/) which allows us to find the height of element including border, padding and optionally padding.\n- viewportTop: Top of the Viewport\n- Can be found with the [scrollTop](https:\/\/api.jquery.com\/scrollTop\/) function on window object. Conveniently returns the relative position from the scrollbar position to object matched, which in this case is our window.\n- viewportBottom: Bottom of Viewport\n- Same as elementBottom. We add height of window to the viewportTop to find bottom.\n\nAll that is left is to find if the element is within the window coordinates.\n```\n]\n$(window).on(‘resize scroll’, function() { \/\/Code here });\n```\nBy wrapping the elements required on a resize, scroll event, we have successfully build the platform to find if an element is in the viewport or not.\n\n**Happy Coding**\n\n[Learn](https:\/\/medium.com\/tag\/learn?source=post_page-----a6a4405a3ea2---------------------------------------)\n\n[Jquery](https:\/\/medium.com\/tag\/jquery?source=post_page-----a6a4405a3ea2---------------------------------------)\n\n[JavaScript](https:\/\/medium.com\/tag\/javascript?source=post_page-----a6a4405a3ea2---------------------------------------)\n\n[Javascript Tips](https:\/\/medium.com\/tag\/javascript-tips?source=post_page-----a6a4405a3ea2---------------------------------------)\n\n1\\.3K\n\n1\\.3K\n\n13\n\n[![Talk Like](https:\/\/miro.medium.com\/v2\/resize:fill:48:48\/1*6JeXXld2mxuarRmR67UNpQ.jpeg)](https:\/\/medium.com\/talk-like?source=post_page---post_publication_info--a6a4405a3ea2---------------------------------------)\n\n[![Talk Like](https:\/\/miro.medium.com\/v2\/resize:fill:64:64\/1*6JeXXld2mxuarRmR67UNpQ.jpeg)](https:\/\/medium.com\/talk-like?source=post_page---post_publication_info--a6a4405a3ea2---------------------------------------)\n\nFollow\n\n[Published in Talk Like](https:\/\/medium.com\/talk-like?source=post_page---post_publication_info--a6a4405a3ea2---------------------------------------)\n\n[47 followers](https:\/\/medium.com\/talk-like\/followers?source=post_page---post_publication_info--a6a4405a3ea2---------------------------------------)\n\n·[Last published Jan 1, 2017](https:\/\/medium.com\/talk-like\/detecting-if-an-element-is-in-the-viewport-jquery-a6a4405a3ea2?source=post_page---post_publication_info--a6a4405a3ea2---------------------------------------)\n\nA Matter of Space and Time\n\nFollow\n\n[![Boy with Silver Wings](https:\/\/miro.medium.com\/v2\/resize:fill:48:48\/1*i-pR-xLX7Fyvri2Fcut9qw.jpeg)](https:\/\/medium.com\/@agney?source=post_page---post_author_info--a6a4405a3ea2---------------------------------------)\n\n[![Boy with Silver Wings](https:\/\/miro.medium.com\/v2\/resize:fill:64:64\/1*i-pR-xLX7Fyvri2Fcut9qw.jpeg)](https:\/\/medium.com\/@agney?source=post_page---post_author_info--a6a4405a3ea2---------------------------------------)\n\nFollow\n\n[Written by Boy with Silver Wings](https:\/\/medium.com\/@agney?source=post_page---post_author_info--a6a4405a3ea2---------------------------------------)\n\n[150 followers](https:\/\/medium.com\/@agney\/followers?source=post_page---post_author_info--a6a4405a3ea2---------------------------------------)\n\n·[160 following](https:\/\/medium.com\/@agney\/following?source=post_page---post_author_info--a6a4405a3ea2---------------------------------------)\n\nEngineer. Driven by Passion.\n\nFollow\n\n## Responses (13)\n![](https:\/\/miro.medium.com\/v2\/resize:fill:32:32\/1*dmbNkD5D-u45r44go_cf0g.png)\n\nWrite a response\n\n[What are your thoughts?](https:\/\/medium.com\/m\/signin?operation=register&redirect=https%3A%2F%2Fmedium.com%2Ftalk-like%2Fdetecting-if-an-element-is-in-the-viewport-jquery-a6a4405a3ea2&source=---post_responses--a6a4405a3ea2---------------------respond_sidebar------------------)\n\nCancel\n\nRespond\n\n[![Christophe Deliens](https:\/\/miro.medium.com\/v2\/resize:fill:32:32\/1*Keyy0TTaJ6CA-qaV7jP2YA.jpeg)](https:\/\/medium.com\/@cdeliens?source=post_page---post_responses--a6a4405a3ea2----0-----------------------------------)\n\n[Christophe Deliens](https:\/\/medium.com\/@cdeliens?source=post_page---post_responses--a6a4405a3ea2----0-----------------------------------)\n\n[Jan 12, 2018](https:\/\/medium.com\/@cdeliens\/nicely-done-3c414c2b98ec?source=post_page---post_responses--a6a4405a3ea2----0-----------------------------------)\n```\nNicely done! In my case, I needed a function to see if the element was fully visible in the viewport (to decide whether to scroll to make it fully visible or not). So I forked your Pen and adapted: <https:\/\/codepen.io\/chdeliens\/pen\/BJxeQG>Thanks!\n```\n40\n\n1 reply\n\nReply\n\n[![Tomas](https:\/\/miro.medium.com\/v2\/resize:fill:32:32\/0*SkwOpjwzPKCCvi2K.jpeg)](https:\/\/medium.com\/@tomasx?source=post_page---post_responses--a6a4405a3ea2---------------------------------------)\n\n[Tomas](https:\/\/medium.com\/@tomasx?source=post_page---post_responses--a6a4405a3ea2---------------------------------------)\n\n[Oct 5, 2018](https:\/\/medium.com\/@tomasx\/here-is-a-version-of-this-plugin-where-you-can-pass-percentage-of-element-on-screen-between-0-and-212d98f461ed?source=post_page---post_responses--a6a4405a3ea2---------------------------------------)\n\n[56 Here is a version of this plugin where you can pass percentage of element on screen between 0 and 1. For example, passing 0.5 will return true when 50% of the element is on screen. Default is 100%. \\$.fn.isInViewport = function(y) {](https:\/\/medium.com\/@tomasx\/here-is-a-version-of-this-plugin-where-you-can-pass-percentage-of-element-on-screen-between-0-and-212d98f461ed?source=post_page---post_responses--a6a4405a3ea2---------------------------------------)\n\n[![Rob Kirkner](https:\/\/miro.medium.com\/v2\/resize:fill:32:32\/1*g4cBMmJLPpuIMGnWElD8nw.png)](https:\/\/medium.com\/@rkirkner?source=post_page---post_responses--a6a4405a3ea2----2-----------------------------------)\n\n[Rob Kirkner](https:\/\/medium.com\/@rkirkner?source=post_page---post_responses--a6a4405a3ea2----2-----------------------------------)\n\n[Feb 7, 2018 (edited)](https:\/\/medium.com\/@rkirkner\/copy-n-pasters-beware-23a5550384ef?source=post_page---post_responses--a6a4405a3ea2----2-----------------------------------)\n\n*\\$(window).on(‘resize scroll’, function() { \/\/Code here });*\n```\nCopy n pasters’ beware! the resize scroll are smart quotes and will not work in a js file. Need to use straight quotes instead.\n```\n4\n\nReply\n\nSee all responses\n\n## More from Boy with Silver Wings and Talk Like\n![Sufiyum Sujayathayum — A non magical love story](https:\/\/miro.medium.com\/v2\/resize:fit:679\/format:webp\/1*u_r0Z0qZvYUZpRsq8YDCIw.jpeg)\n\n[![Boy with Silver Wings](https:\/\/miro.medium.com\/v2\/resize:fill:20:20\/1*i-pR-xLX7Fyvri2Fcut9qw.jpeg)](https:\/\/medium.com\/@agney?source=post_page---author_recirc--a6a4405a3ea2----0---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------)\n\n[Boy with Silver Wings](https:\/\/medium.com\/@agney?source=post_page---author_recirc--a6a4405a3ea2----0---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------)\n\n[Sufiyum Sujayathayum — A non magical love storySufiyum Sujathayum is a Malayalam movie directed by Naranipuzha Shanavas and produced by Friday Film House. It stars Aditi Rao Hydari, Dev…](https:\/\/medium.com\/@agney\/sufiyum-sujayathayum-a-non-magical-love-story-c9dd80834468?source=post_page---author_recirc--a6a4405a3ea2----0---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------)\n\nJul 9, 2020\n\n[A clap icon 86](https:\/\/medium.com\/@agney\/sufiyum-sujayathayum-a-non-magical-love-story-c9dd80834468?source=post_page---author_recirc--a6a4405a3ea2----0---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------)\n\n![Bri Heart](https:\/\/miro.medium.com\/v2\/resize:fit:679\/format:webp\/0*ZrHPHs9AG6xSdNTI.jpg)\n\n[![Talk Like](https:\/\/miro.medium.com\/v2\/resize:fill:20:20\/1*6JeXXld2mxuarRmR67UNpQ.jpeg)](https:\/\/medium.com\/talk-like?source=post_page---author_recirc--a6a4405a3ea2----1---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------)\n\nIn\n\n[Talk Like](https:\/\/medium.com\/talk-like?source=post_page---author_recirc--a6a4405a3ea2----1---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------)\n\nby\n\n[Boy with Silver Wings](https:\/\/medium.com\/@agney?source=post_page---author_recirc--a6a4405a3ea2----1---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------)\n\n[Most Beautiful Youtube’s Cover Singers](https:\/\/medium.com\/talk-like\/most-beautiful-youtubes-cover-singers-2ae22f4c40df?source=post_page---author_recirc--a6a4405a3ea2----1---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------)\n\nJun 28, 2015\n\n[A clap icon 3](https:\/\/medium.com\/talk-like\/most-beautiful-youtubes-cover-singers-2ae22f4c40df?source=post_page---author_recirc--a6a4405a3ea2----1---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------)\n\n![Image](https:\/\/miro.medium.com\/v2\/resize:fit:679\/format:webp\/0*Rxk1Fdy2ziin26po.png)\n\n[![Talk Like](https:\/\/miro.medium.com\/v2\/resize:fill:20:20\/1*6JeXXld2mxuarRmR67UNpQ.jpeg)](https:\/\/medium.com\/talk-like?source=post_page---author_recirc--a6a4405a3ea2----2---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------)\n\nIn\n\n[Talk Like](https:\/\/medium.com\/talk-like?source=post_page---author_recirc--a6a4405a3ea2----2---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------)\n\nby\n\n[Boy with Silver Wings](https:\/\/medium.com\/@agney?source=post_page---author_recirc--a6a4405a3ea2----2---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------)\n\n[Must Have Rainmeter Skins](https:\/\/medium.com\/talk-like\/must-have-rainmeter-skins-b77ff9aae174?source=post_page---author_recirc--a6a4405a3ea2----2---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------)\n\nDec 19, 2014\n\n[A clap icon 12A response icon 2](https:\/\/medium.com\/talk-like\/must-have-rainmeter-skins-b77ff9aae174?source=post_page---author_recirc--a6a4405a3ea2----2---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------)\n\n![maxresdefault](https:\/\/miro.medium.com\/v2\/resize:fit:679\/format:webp\/0*XTm2N2FmFKIhXtDx.jpg)\n\n[![Boy with Silver Wings](https:\/\/miro.medium.com\/v2\/resize:fill:20:20\/1*i-pR-xLX7Fyvri2Fcut9qw.jpeg)](https:\/\/medium.com\/@agney?source=post_page---author_recirc--a6a4405a3ea2----3---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------)\n\n[Boy with Silver Wings](https:\/\/medium.com\/@agney?source=post_page---author_recirc--a6a4405a3ea2----3---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------)\n\n[Captain America: Civil War Spoiler-Full review](https:\/\/medium.com\/@agney\/captain-america-civil-war-spoiler-full-review-dda17f63e9bb?source=post_page---author_recirc--a6a4405a3ea2----3---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------)\n\nMay 10, 2016\n\n[See all from Boy with Silver Wings](https:\/\/medium.com\/@agney?source=post_page---author_recirc--a6a4405a3ea2---------------------------------------)\n\n[See all from Talk Like](https:\/\/medium.com\/talk-like?source=post_page---author_recirc--a6a4405a3ea2---------------------------------------)\n\n## Recommended from Medium\n![I Failed Uber’s System Design Interview Last Month. Here’s Every Question They Asked.](https:\/\/miro.medium.com\/v2\/resize:fit:679\/format:webp\/1*qsLQ4rhh17G52gAwXbP4ww.png)\n\n[![Emily](https:\/\/miro.medium.com\/v2\/resize:fill:20:20\/1*vUnVpbjypEdq0szgnzikkA.png)](https:\/\/medium.com\/@emilyhustlenyc?source=post_page---read_next_recirc--a6a4405a3ea2----0---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------)\n\n[Emily](https:\/\/medium.com\/@emilyhustlenyc?source=post_page---read_next_recirc--a6a4405a3ea2----0---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------)\n\n[I Failed Uber’s System Design Interview Last Month. Here’s Every Question They Asked.It was much harder and the rejection email taught me more than any LeetCode grind ever could.](https:\/\/medium.com\/@emilyhustlenyc\/i-failed-ubers-system-design-interview-last-month-here-s-every-question-they-asked-bdaf1bd6e64b?source=post_page---read_next_recirc--a6a4405a3ea2----0---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------)\n\nFeb 20\n\n[A clap icon 1.7KA response icon 44](https:\/\/medium.com\/@emilyhustlenyc\/i-failed-ubers-system-design-interview-last-month-here-s-every-question-they-asked-bdaf1bd6e64b?source=post_page---read_next_recirc--a6a4405a3ea2----0---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------)\n\n![An example of a perfect, human designed dashboard interface for desktop and mobile phone](https:\/\/miro.medium.com\/v2\/resize:fit:679\/format:webp\/1*C8RVDKs_uZrVUdgpsF6Fmw.png)\n\n[![Michal Malewicz](https:\/\/miro.medium.com\/v2\/resize:fill:20:20\/1*149zXrb2FXvS_mctL4NKSg.png)](https:\/\/medium.com\/@michalmalewicz?source=post_page---read_next_recirc--a6a4405a3ea2----1---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------)\n\n[Michal Malewicz](https:\/\/medium.com\/@michalmalewicz?source=post_page---read_next_recirc--a6a4405a3ea2----1---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------)\n\n[The End of Dashboards and Design SystemsDesign is becoming quietly human again.](https:\/\/medium.com\/@michalmalewicz\/the-end-of-dashboards-and-design-systems-5d98ec9de627?source=post_page---read_next_recirc--a6a4405a3ea2----1---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------)\n\nNov 26, 2025\n\n[A clap icon 6.8KA response icon 283](https:\/\/medium.com\/@michalmalewicz\/the-end-of-dashboards-and-design-systems-5d98ec9de627?source=post_page---read_next_recirc--a6a4405a3ea2----1---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------)\n\n![If You Understand These 5 AI Terms, You’re Ahead of 90% of People](https:\/\/miro.medium.com\/v2\/resize:fit:679\/format:webp\/1*qbVrf-wO9PYtthAj6E4RYQ.png)\n\n[![Towards AI](https:\/\/miro.medium.com\/v2\/resize:fill:20:20\/1*JyIThO-cLjlChQLb6kSlVQ.png)](https:\/\/medium.com\/towards-artificial-intelligence?source=post_page---read_next_recirc--a6a4405a3ea2----0---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------)\n\nIn\n\n[Towards AI](https:\/\/medium.com\/towards-artificial-intelligence?source=post_page---read_next_recirc--a6a4405a3ea2----0---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------)\n\nby\n\n[Shreyas Naphad](https:\/\/medium.com\/@shreyasnaphad?source=post_page---read_next_recirc--a6a4405a3ea2----0---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------)\n\n[If You Understand These 5 AI Terms, You’re Ahead of 90% of PeopleMaster the core ideas behind AI without getting lost](https:\/\/medium.com\/towards-artificial-intelligence\/if-you-understand-these-5-ai-terms-youre-ahead-of-90-of-people-c7622d353319?source=post_page---read_next_recirc--a6a4405a3ea2----0---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------)\n\nMar 29\n\n[A clap icon 9KA response icon 180](https:\/\/medium.com\/towards-artificial-intelligence\/if-you-understand-these-5-ai-terms-youre-ahead-of-90-of-people-c7622d353319?source=post_page---read_next_recirc--a6a4405a3ea2----0---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------)\n\n![6 brain images](https:\/\/miro.medium.com\/v2\/resize:fit:679\/format:webp\/1*Q-mzQNzJSVYkVGgsmHVjfw.png)\n\n[![Write A Catalyst](https:\/\/miro.medium.com\/v2\/resize:fill:20:20\/1*KCHN5TM3Ga2PqZHA4hNbaw.png)](https:\/\/medium.com\/write-a-catalyst?source=post_page---read_next_recirc--a6a4405a3ea2----1---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------)\n\nIn\n\n[Write A Catalyst](https:\/\/medium.com\/write-a-catalyst?source=post_page---read_next_recirc--a6a4405a3ea2----1---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------)\n\nby\n\n[Dr. Patricia Schmidt](https:\/\/medium.com\/@creatorschmidt?source=post_page---read_next_recirc--a6a4405a3ea2----1---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------)\n\n[As a Neuroscientist, I Quit These 5 Morning Habits That Destroy Your BrainMost people do \\#1 within 10 minutes of waking (and it sabotages your entire day)](https:\/\/medium.com\/write-a-catalyst\/as-a-neuroscientist-i-quit-these-5-morning-habits-that-destroy-your-brain-3efe1f410226?source=post_page---read_next_recirc--a6a4405a3ea2----1---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------)\n\nJan 14\n\n[A clap icon 46KA response icon 941](https:\/\/medium.com\/write-a-catalyst\/as-a-neuroscientist-i-quit-these-5-morning-habits-that-destroy-your-brain-3efe1f410226?source=post_page---read_next_recirc--a6a4405a3ea2----1---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------)\n\n![I Stopped Using ChatGPT for 30 Days. What Happened to My Brain Was Terrifying.](https:\/\/miro.medium.com\/v2\/resize:fit:679\/format:webp\/1*z4UOJs0b33M4UJXq5MXkww.png)\n\n[![Level Up Coding](https:\/\/miro.medium.com\/v2\/resize:fill:20:20\/1*5D9oYBd58pyjMkV_5-zXXQ.jpeg)](https:\/\/medium.com\/gitconnected?source=post_page---read_next_recirc--a6a4405a3ea2----2---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------)\n\nIn\n\n[Level Up Coding](https:\/\/medium.com\/gitconnected?source=post_page---read_next_recirc--a6a4405a3ea2----2---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------)\n\nby\n\n[Kusireddy](https:\/\/medium.com\/@kusireddy?source=post_page---read_next_recirc--a6a4405a3ea2----2---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------)\n\n[I Stopped Using ChatGPT for 30 Days. What Happened to My Brain Was Terrifying.91% of you will abandon 2026 resolutions by January 10th. Here’s how to be in the 9% who actually win.](https:\/\/medium.com\/gitconnected\/i-stopped-using-chatgpt-for-30-days-what-happened-to-my-brain-was-terrifying-70d2a62246c0?source=post_page---read_next_recirc--a6a4405a3ea2----2---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------)\n\nDec 28, 2025\n\n[A clap icon 12.9KA response icon 491](https:\/\/medium.com\/gitconnected\/i-stopped-using-chatgpt-for-30-days-what-happened-to-my-brain-was-terrifying-70d2a62246c0?source=post_page---read_next_recirc--a6a4405a3ea2----2---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------)\n\n![I Woke Up at 4:30 AM Every Day for 30 Days — Here Is What Nobody Tells You](https:\/\/miro.medium.com\/v2\/resize:fit:679\/format:webp\/1*0XnPmr19m6XJf9vZ9ojJ-Q.png)\n\n[![ILLUMINATION](https:\/\/miro.medium.com\/v2\/resize:fill:20:20\/1*AZxiin1Cvws3J0TwNUP2sQ.png)](https:\/\/medium.com\/illumination?source=post_page---read_next_recirc--a6a4405a3ea2----3---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------)\n\nIn\n\n[ILLUMINATION](https:\/\/medium.com\/illumination?source=post_page---read_next_recirc--a6a4405a3ea2----3---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------)\n\nby\n\n[Sufyan Maan, M.Eng](https:\/\/medium.com\/@sufyanmaan?source=post_page---read_next_recirc--a6a4405a3ea2----3---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------)\n\n[I Woke Up at 4:30 AM Every Day for 30 Days — Here Is What Nobody Tells YouHere is what actually happened, from someone who did it & tracked everything.](https:\/\/medium.com\/illumination\/i-woke-up-at-4-30-am-every-day-for-30-days-here-is-what-nobody-tells-you-054bf0160903?source=post_page---read_next_recirc--a6a4405a3ea2----3---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------)\n\nApr 4\n\n[A clap icon 7.6KA response icon 329](https:\/\/medium.com\/illumination\/i-woke-up-at-4-30-am-every-day-for-30-days-here-is-what-nobody-tells-you-054bf0160903?source=post_page---read_next_recirc--a6a4405a3ea2----3---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------)\n\n[See more recommendations](https:\/\/medium.com\/?source=post_page---read_next_recirc--a6a4405a3ea2---------------------------------------)\n\n[Help](https:\/\/help.medium.com\/hc\/en-us?source=post_page-----a6a4405a3ea2---------------------------------------)\n\n[Status](https:\/\/status.medium.com\/?source=post_page-----a6a4405a3ea2---------------------------------------)\n\n[About](https:\/\/medium.com\/about?autoplay=1&source=post_page-----a6a4405a3ea2---------------------------------------)\n\n[Careers](https:\/\/medium.com\/jobs-at-medium\/work-at-medium-959d1a85284e?source=post_page-----a6a4405a3ea2---------------------------------------)\n\n[Press](mailto:pressinquiries@medium.com)\n\n[Blog](https:\/\/blog.medium.com\/?source=post_page-----a6a4405a3ea2---------------------------------------)\n\n[Privacy](https:\/\/policy.medium.com\/medium-privacy-policy-f03bf92035c9?source=post_page-----a6a4405a3ea2---------------------------------------)\n\n[Rules](https:\/\/policy.medium.com\/medium-rules-30e5502c4eb4?source=post_page-----a6a4405a3ea2---------------------------------------)\n\n[Terms](https:\/\/policy.medium.com\/medium-terms-of-service-9db0094a1e0f?source=post_page-----a6a4405a3ea2---------------------------------------)\n\n[Text to speech](https:\/\/speechify.com\/medium?source=post_page-----a6a4405a3ea2---------------------------------------)","attrs_readable_markdown":"[![Boy with Silver Wings](https:\/\/miro.medium.com\/v2\/resize:fill:32:32\/1*i-pR-xLX7Fyvri2Fcut9qw.jpeg)](https:\/\/medium.com\/@agney?source=post_page---byline--a6a4405a3ea2---------------------------------------)\n\n2 min read Jan 1, 2017\n\nDetect if an element is visible in the view port. Now why would any one in the right mind want to do that? Well you are reading this, so may be you know why.\n\nPress enter or click to view image in full size\n\n![](https:\/\/miro.medium.com\/v2\/resize:fit:700\/1*ErXwPjnEwghWwqwdCtxaMg.jpeg)\n\nSmall Experiment on Codepen\n\nI have to warn you that there are already plugins that help us do the same with jQuery like\n\n1. <https:\/\/github.com\/customd\/jquery-visible>\n2. <http:\/\/www.appelsiini.net\/projects\/viewport>\n\nWhile all these exist, how many plugins shall we ship with our website? How is the user going to cache them all? Let’s take a peek into how this is done.\n\nPS: I’m not going to be talking about jQuery :visible selector. This selector selects elements based on display CSS property or opacity.\n\nWe are going to be discussing how to detect if an element is visible on screen in real time.\n\nHere is a codepen demo of what we will be doing.\n\nThis started with [this question](http:\/\/stackoverflow.com\/questions\/41416863\/changing-color-when-specific-div-is-visible) on Stackoverflow for which my answer is [here](http:\/\/stackoverflow.com\/a\/41417072\/4374566).\n\nIt has been made to suit the question with some borrowed code from [this stackoverflow answer](http:\/\/stackoverflow.com\/a\/33979503\/4374566).\n\nGet Boy with Silver Wings’s stories in your inbox\n\nJoin Medium for free to get updates from this writer.\n\nRemember me for faster sign in\n\nEnough with the How I got here lesson. Getting to the JS part.\n```\n$.fn.isInViewport = function() {\nvar elementTop = $(this).offset().top;\nvar elementBottom = elementTop + $(this).outerHeight();var viewportTop = $(window).scrollTop();\nvar viewportBottom = viewportTop + $(window).height();return elementBottom > viewportTop && elementTop < viewportBottom;\n};\n```\nThis forms the part of JS that concerns us most. To check if an element is in the viewport, we need four variables.  \nThese being:\n\n- elementTop : Top position of the element.\n- offset function is used to find the position relative to parent element(body in this case) and top refers to the distance from the top.\n- elementBottom: Bottom position of element\n- 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](http:\/\/api.jquery.com\/outerheight\/) which allows us to find the height of element including border, padding and optionally padding.\n- viewportTop: Top of the Viewport\n- Can be found with the [scrollTop](https:\/\/api.jquery.com\/scrollTop\/) function on window object. Conveniently returns the relative position from the scrollbar position to object matched, which in this case is our window.\n- viewportBottom: Bottom of Viewport\n- Same as elementBottom. We add height of window to the viewportTop to find bottom.\n\nAll that is left is to find if the element is within the window coordinates.\n```\n]\n$(window).on(‘resize scroll’, function() { \/\/Code here });\n```\nBy wrapping the elements required on a resize, scroll event, we have successfully build the platform to find if an element is in the viewport or not.\n\n**Happy Coding**","meta_canonical":null}

3. Robots.txt Check

Query:

Response:

4. Spam/Ban Check

Query:

Response:

5. Seen Status Check

ℹ️ Skipped - page is already crawled

📄

INDEXABLE

✅

CRAWLED

5 days ago

🤖

ROBOTS ALLOWED

Page Info Filters

Filter	Status	Condition	Details
HTTP status	PASS	`download_http_code = 200`	HTTP 200
Age cutoff	PASS	`download_stamp > now() - 6 MONTH`	0.2 months ago
History drop	PASS	`isNull(history_drop_reason)`	No drop reason
Spam/ban	PASS	`fh_dont_index != 1 AND ml_spam_score = 0`	ml_spam_score=0
Canonical	PASS	`meta_canonical IS NULL OR = '' OR = src_unparsed`	Not set

Page Details

Property	Value
URL	https://medium.com/talk-like/detecting-if-an-element-is-in-the-viewport-jquery-a6a4405a3ea2
Last Crawled	2026-04-12 19:54:25 (5 days ago)
First Indexed	2017-11-27 04:40:50 (8 years ago)
HTTP Status Code	200
Meta Title	Detecting if an element is in the Viewport : jQuery \| by Boy with Silver Wings \| Talk Like \| Medium
Meta Description	Detecting if an element is in the Viewport : jQuery Detect if an element is visible in the view port. Now why would any one in the right mind want to do that? Well you are reading this, so may be you …
Meta Canonical	null
Boilerpipe Text	2 min read Jan 1, 2017 Detect if an element is visible in the view port. Now why would any one in the right mind want to do that? Well you are reading this, so may be you know why. Press enter or click to view image in full size Small Experiment on Codepen I have to warn you that there are already plugins that help us do the same with jQuery like https://github.com/customd/jquery-visible http://www.appelsiini.net/projects/viewport While all these exist, how many plugins shall we ship with our website? How is the user going to cache them all? Let’s take a peek into how this is done. PS: I’m not going to be talking about jQuery :visible selector. This selector selects elements based on display CSS property or opacity. We are going to be discussing how to detect if an element is visible on screen in real time. Here is a codepen demo of what we will be doing. This started with this question on Stackoverflow for which my answer is here . It has been made to suit the question with some borrowed code from this stackoverflow answer . Get Boy with Silver Wings’s stories in your inbox Join Medium for free to get updates from this writer. Remember me for faster sign in Enough with the How I got here lesson. Getting to the JS part. $.fn.isInViewport = function() { var elementTop = $(this).offset().top; var elementBottom = elementTop + $(this).outerHeight(); var viewportTop = $(window).scrollTop(); var viewportBottom = viewportTop + $(window).height(); return elementBottom > viewportTop && elementTop < viewportBottom; }; This forms the part of JS that concerns us most. To check if an element is in the viewport, we need four variables. These being: elementTop : Top position of the element. offset function is used to find the position relative to parent element(body in this case) and top refers to the distance from the top. elementBottom: Bottom position of element 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 Can be found with the scrollTop function on window object. Conveniently returns the relative position from the scrollbar position to object matched, which in this case is our window. viewportBottom: Bottom of Viewport Same as elementBottom. We add height of window to the viewportTop to find bottom. All that is left is to find if the element is within the window coordinates. ] $(window).on(‘resize scroll’, function() { //Code here }); By wrapping the elements required on a resize, scroll event, we have successfully build the platform to find if an element is in the viewport or not. Happy Coding
Markdown	[Sitemap](https://medium.com/sitemap/sitemap.xml) [Open in app](https://play.google.com/store/apps/details?id=com.medium.reader&referrer=utm_source%3DmobileNavBar&source=post_page---top_nav_layout_nav-----------------------------------------) Sign up [Sign in](https://medium.com/m/signin?operation=login&redirect=https%3A%2F%2Fmedium.com%2Ftalk-like%2Fdetecting-if-an-element-is-in-the-viewport-jquery-a6a4405a3ea2&source=post_page---top_nav_layout_nav-----------------------global_nav------------------) [Medium Logo](https://medium.com/?source=post_page---top_nav_layout_nav-----------------------------------------) Get app [Write](https://medium.com/m/signin?operation=register&redirect=https%3A%2F%2Fmedium.com%2Fnew-story&source=---top_nav_layout_nav-----------------------new_post_topnav------------------) [Search](https://medium.com/search?source=post_page---top_nav_layout_nav-----------------------------------------) Sign up [Sign in](https://medium.com/m/signin?operation=login&redirect=https%3A%2F%2Fmedium.com%2Ftalk-like%2Fdetecting-if-an-element-is-in-the-viewport-jquery-a6a4405a3ea2&source=post_page---top_nav_layout_nav-----------------------global_nav------------------) ![](https://miro.medium.com/v2/resize:fill:32:32/1dmbNkD5D-u45r44go_cf0g.png) [Talk Like](https://medium.com/talk-like?source=post_page---publication_nav-7751dd6af89c-a6a4405a3ea2---------------------------------------) · Follow publication [![Talk Like](https://miro.medium.com/v2/resize:fill:38:38/16JeXXld2mxuarRmR67UNpQ.jpeg)](https://medium.com/talk-like?source=post_page---post_publication_sidebar-7751dd6af89c-a6a4405a3ea2---------------------------------------) A Matter of Space and Time Follow publication 1 # Detecting if an element is in the Viewport : jQuery [![Boy with Silver Wings](https://miro.medium.com/v2/resize:fill:32:32/1i-pR-xLX7Fyvri2Fcut9qw.jpeg)](https://medium.com/@agney?source=post_page---byline--a6a4405a3ea2---------------------------------------) [Boy with Silver Wings](https://medium.com/@agney?source=post_page---byline--a6a4405a3ea2---------------------------------------) Follow 2 min read · Jan 1, 2017 1\.3K 13 [Listen](https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2Fplans%3Fdimension%3Dpost_audio_button%26postId%3Da6a4405a3ea2&operation=register&redirect=https%3A%2F%2Fmedium.com%2Ftalk-like%2Fdetecting-if-an-element-is-in-the-viewport-jquery-a6a4405a3ea2&source=---header_actions--a6a4405a3ea2---------------------post_audio_button------------------) Share Detect if an element is visible in the view port. Now why would any one in the right mind want to do that? Well you are reading this, so may be you know why. Press enter or click to view image in full size ![](https://miro.medium.com/v2/resize:fit:700/1ErXwPjnEwghWwqwdCtxaMg.jpeg) Small Experiment on Codepen I have to warn you that there are already plugins that help us do the same with jQuery like 1. <https://github.com/customd/jquery-visible> 2. <http://www.appelsiini.net/projects/viewport> While all these exist, how many plugins shall we ship with our website? How is the user going to cache them all? Let’s take a peek into how this is done. PS: I’m not going to be talking about jQuery :visible selector. This selector selects elements based on display CSS property or opacity. We are going to be discussing how to detect if an element is visible on screen in real time. Here is a codepen demo of what we will be doing. This started with [this question](http://stackoverflow.com/questions/41416863/changing-color-when-specific-div-is-visible) on Stackoverflow for which my answer is [here](http://stackoverflow.com/a/41417072/4374566). It has been made to suit the question with some borrowed code from [this stackoverflow answer](http://stackoverflow.com/a/33979503/4374566). ## Get Boy with Silver Wings’s stories in your inbox Join Medium for free to get updates from this writer. Subscribe Subscribe Remember me for faster sign in Enough with the How I got here lesson. Getting to the JS part. ``` $.fn.isInViewport = function() { var elementTop = $(this).offset().top; var elementBottom = elementTop + $(this).outerHeight();var viewportTop = $(window).scrollTop(); var viewportBottom = viewportTop + $(window).height();return elementBottom > viewportTop && elementTop < viewportBottom; }; ``` This forms the part of JS that concerns us most. To check if an element is in the viewport, we need four variables. These being: - elementTop : Top position of the element. - offset function is used to find the position relative to parent element(body in this case) and top refers to the distance from the top. - elementBottom: Bottom position of element - 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](http://api.jquery.com/outerheight/) which allows us to find the height of element including border, padding and optionally padding. - viewportTop: Top of the Viewport - Can be found with the [scrollTop](https://api.jquery.com/scrollTop/) function on window object. Conveniently returns the relative position from the scrollbar position to object matched, which in this case is our window. - viewportBottom: Bottom of Viewport - Same as elementBottom. We add height of window to the viewportTop to find bottom. All that is left is to find if the element is within the window coordinates. ``` ] $(window).on(‘resize scroll’, function() { //Code here }); ``` By wrapping the elements required on a resize, scroll event, we have successfully build the platform to find if an element is in the viewport or not. Happy Coding [Learn](https://medium.com/tag/learn?source=post_page-----a6a4405a3ea2---------------------------------------) [Jquery](https://medium.com/tag/jquery?source=post_page-----a6a4405a3ea2---------------------------------------) [JavaScript](https://medium.com/tag/javascript?source=post_page-----a6a4405a3ea2---------------------------------------) [Javascript Tips](https://medium.com/tag/javascript-tips?source=post_page-----a6a4405a3ea2---------------------------------------) 1\.3K 1\.3K 13 [![Talk Like](https://miro.medium.com/v2/resize:fill:48:48/16JeXXld2mxuarRmR67UNpQ.jpeg)](https://medium.com/talk-like?source=post_page---post_publication_info--a6a4405a3ea2---------------------------------------) [![Talk Like](https://miro.medium.com/v2/resize:fill:64:64/16JeXXld2mxuarRmR67UNpQ.jpeg)](https://medium.com/talk-like?source=post_page---post_publication_info--a6a4405a3ea2---------------------------------------) Follow [Published in Talk Like](https://medium.com/talk-like?source=post_page---post_publication_info--a6a4405a3ea2---------------------------------------) [47 followers](https://medium.com/talk-like/followers?source=post_page---post_publication_info--a6a4405a3ea2---------------------------------------) ·[Last published Jan 1, 2017](https://medium.com/talk-like/detecting-if-an-element-is-in-the-viewport-jquery-a6a4405a3ea2?source=post_page---post_publication_info--a6a4405a3ea2---------------------------------------) A Matter of Space and Time Follow [![Boy with Silver Wings](https://miro.medium.com/v2/resize:fill:48:48/1i-pR-xLX7Fyvri2Fcut9qw.jpeg)](https://medium.com/@agney?source=post_page---post_author_info--a6a4405a3ea2---------------------------------------) [![Boy with Silver Wings](https://miro.medium.com/v2/resize:fill:64:64/1i-pR-xLX7Fyvri2Fcut9qw.jpeg)](https://medium.com/@agney?source=post_page---post_author_info--a6a4405a3ea2---------------------------------------) Follow [Written by Boy with Silver Wings](https://medium.com/@agney?source=post_page---post_author_info--a6a4405a3ea2---------------------------------------) [150 followers](https://medium.com/@agney/followers?source=post_page---post_author_info--a6a4405a3ea2---------------------------------------) ·[160 following](https://medium.com/@agney/following?source=post_page---post_author_info--a6a4405a3ea2---------------------------------------) Engineer. Driven by Passion. Follow ## Responses (13) ![](https://miro.medium.com/v2/resize:fill:32:32/1dmbNkD5D-u45r44go_cf0g.png) Write a response [What are your thoughts?](https://medium.com/m/signin?operation=register&redirect=https%3A%2F%2Fmedium.com%2Ftalk-like%2Fdetecting-if-an-element-is-in-the-viewport-jquery-a6a4405a3ea2&source=---post_responses--a6a4405a3ea2---------------------respond_sidebar------------------) Cancel Respond [![Christophe Deliens](https://miro.medium.com/v2/resize:fill:32:32/1Keyy0TTaJ6CA-qaV7jP2YA.jpeg)](https://medium.com/@cdeliens?source=post_page---post_responses--a6a4405a3ea2----0-----------------------------------) [Christophe Deliens](https://medium.com/@cdeliens?source=post_page---post_responses--a6a4405a3ea2----0-----------------------------------) [Jan 12, 2018](https://medium.com/@cdeliens/nicely-done-3c414c2b98ec?source=post_page---post_responses--a6a4405a3ea2----0-----------------------------------) ``` Nicely done! In my case, I needed a function to see if the element was fully visible in the viewport (to decide whether to scroll to make it fully visible or not). So I forked your Pen and adapted: <https://codepen.io/chdeliens/pen/BJxeQG>Thanks! ``` 40 1 reply Reply [![Tomas](https://miro.medium.com/v2/resize:fill:32:32/0SkwOpjwzPKCCvi2K.jpeg)](https://medium.com/@tomasx?source=post_page---post_responses--a6a4405a3ea2---------------------------------------) [Tomas](https://medium.com/@tomasx?source=post_page---post_responses--a6a4405a3ea2---------------------------------------) [Oct 5, 2018](https://medium.com/@tomasx/here-is-a-version-of-this-plugin-where-you-can-pass-percentage-of-element-on-screen-between-0-and-212d98f461ed?source=post_page---post_responses--a6a4405a3ea2---------------------------------------) [56 Here is a version of this plugin where you can pass percentage of element on screen between 0 and 1. For example, passing 0.5 will return true when 50% of the element is on screen. Default is 100%. \$.fn.isInViewport = function(y) {](https://medium.com/@tomasx/here-is-a-version-of-this-plugin-where-you-can-pass-percentage-of-element-on-screen-between-0-and-212d98f461ed?source=post_page---post_responses--a6a4405a3ea2---------------------------------------) [![Rob Kirkner](https://miro.medium.com/v2/resize:fill:32:32/1g4cBMmJLPpuIMGnWElD8nw.png)](https://medium.com/@rkirkner?source=post_page---post_responses--a6a4405a3ea2----2-----------------------------------) [Rob Kirkner](https://medium.com/@rkirkner?source=post_page---post_responses--a6a4405a3ea2----2-----------------------------------) [Feb 7, 2018 (edited)](https://medium.com/@rkirkner/copy-n-pasters-beware-23a5550384ef?source=post_page---post_responses--a6a4405a3ea2----2-----------------------------------) \$(window).on(‘resize scroll’, function() { //Code here }); ``` Copy n pasters’ beware! the resize scroll are smart quotes and will not work in a js file. Need to use straight quotes instead. ``` 4 Reply See all responses ## More from Boy with Silver Wings and Talk Like ![Sufiyum Sujayathayum — A non magical love story](https://miro.medium.com/v2/resize:fit:679/format:webp/1u_r0Z0qZvYUZpRsq8YDCIw.jpeg) [![Boy with Silver Wings](https://miro.medium.com/v2/resize:fill:20:20/1i-pR-xLX7Fyvri2Fcut9qw.jpeg)](https://medium.com/@agney?source=post_page---author_recirc--a6a4405a3ea2----0---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------) [Boy with Silver Wings](https://medium.com/@agney?source=post_page---author_recirc--a6a4405a3ea2----0---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------) [Sufiyum Sujayathayum — A non magical love storySufiyum Sujathayum is a Malayalam movie directed by Naranipuzha Shanavas and produced by Friday Film House. It stars Aditi Rao Hydari, Dev…](https://medium.com/@agney/sufiyum-sujayathayum-a-non-magical-love-story-c9dd80834468?source=post_page---author_recirc--a6a4405a3ea2----0---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------) Jul 9, 2020 [A clap icon 86](https://medium.com/@agney/sufiyum-sujayathayum-a-non-magical-love-story-c9dd80834468?source=post_page---author_recirc--a6a4405a3ea2----0---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------) ![Bri Heart](https://miro.medium.com/v2/resize:fit:679/format:webp/0ZrHPHs9AG6xSdNTI.jpg) [![Talk Like](https://miro.medium.com/v2/resize:fill:20:20/16JeXXld2mxuarRmR67UNpQ.jpeg)](https://medium.com/talk-like?source=post_page---author_recirc--a6a4405a3ea2----1---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------) In [Talk Like](https://medium.com/talk-like?source=post_page---author_recirc--a6a4405a3ea2----1---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------) by [Boy with Silver Wings](https://medium.com/@agney?source=post_page---author_recirc--a6a4405a3ea2----1---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------) [Most Beautiful Youtube’s Cover Singers](https://medium.com/talk-like/most-beautiful-youtubes-cover-singers-2ae22f4c40df?source=post_page---author_recirc--a6a4405a3ea2----1---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------) Jun 28, 2015 [A clap icon 3](https://medium.com/talk-like/most-beautiful-youtubes-cover-singers-2ae22f4c40df?source=post_page---author_recirc--a6a4405a3ea2----1---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------) ![Image](https://miro.medium.com/v2/resize:fit:679/format:webp/0Rxk1Fdy2ziin26po.png) [![Talk Like](https://miro.medium.com/v2/resize:fill:20:20/16JeXXld2mxuarRmR67UNpQ.jpeg)](https://medium.com/talk-like?source=post_page---author_recirc--a6a4405a3ea2----2---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------) In [Talk Like](https://medium.com/talk-like?source=post_page---author_recirc--a6a4405a3ea2----2---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------) by [Boy with Silver Wings](https://medium.com/@agney?source=post_page---author_recirc--a6a4405a3ea2----2---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------) [Must Have Rainmeter Skins](https://medium.com/talk-like/must-have-rainmeter-skins-b77ff9aae174?source=post_page---author_recirc--a6a4405a3ea2----2---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------) Dec 19, 2014 [A clap icon 12A response icon 2](https://medium.com/talk-like/must-have-rainmeter-skins-b77ff9aae174?source=post_page---author_recirc--a6a4405a3ea2----2---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------) ![maxresdefault](https://miro.medium.com/v2/resize:fit:679/format:webp/0XTm2N2FmFKIhXtDx.jpg) [![Boy with Silver Wings](https://miro.medium.com/v2/resize:fill:20:20/1i-pR-xLX7Fyvri2Fcut9qw.jpeg)](https://medium.com/@agney?source=post_page---author_recirc--a6a4405a3ea2----3---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------) [Boy with Silver Wings](https://medium.com/@agney?source=post_page---author_recirc--a6a4405a3ea2----3---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------) [Captain America: Civil War Spoiler-Full review](https://medium.com/@agney/captain-america-civil-war-spoiler-full-review-dda17f63e9bb?source=post_page---author_recirc--a6a4405a3ea2----3---------------------5833c8d9_460b_4824_b3b0_71461f4d02b8--------------) May 10, 2016 [See all from Boy with Silver Wings](https://medium.com/@agney?source=post_page---author_recirc--a6a4405a3ea2---------------------------------------) [See all from Talk Like](https://medium.com/talk-like?source=post_page---author_recirc--a6a4405a3ea2---------------------------------------) ## Recommended from Medium ![I Failed Uber’s System Design Interview Last Month. Here’s Every Question They Asked.](https://miro.medium.com/v2/resize:fit:679/format:webp/1qsLQ4rhh17G52gAwXbP4ww.png) [![Emily](https://miro.medium.com/v2/resize:fill:20:20/1vUnVpbjypEdq0szgnzikkA.png)](https://medium.com/@emilyhustlenyc?source=post_page---read_next_recirc--a6a4405a3ea2----0---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------) [Emily](https://medium.com/@emilyhustlenyc?source=post_page---read_next_recirc--a6a4405a3ea2----0---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------) [I Failed Uber’s System Design Interview Last Month. Here’s Every Question They Asked.It was much harder and the rejection email taught me more than any LeetCode grind ever could.](https://medium.com/@emilyhustlenyc/i-failed-ubers-system-design-interview-last-month-here-s-every-question-they-asked-bdaf1bd6e64b?source=post_page---read_next_recirc--a6a4405a3ea2----0---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------) Feb 20 [A clap icon 1.7KA response icon 44](https://medium.com/@emilyhustlenyc/i-failed-ubers-system-design-interview-last-month-here-s-every-question-they-asked-bdaf1bd6e64b?source=post_page---read_next_recirc--a6a4405a3ea2----0---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------) ![An example of a perfect, human designed dashboard interface for desktop and mobile phone](https://miro.medium.com/v2/resize:fit:679/format:webp/1C8RVDKs_uZrVUdgpsF6Fmw.png) [![Michal Malewicz](https://miro.medium.com/v2/resize:fill:20:20/1149zXrb2FXvS_mctL4NKSg.png)](https://medium.com/@michalmalewicz?source=post_page---read_next_recirc--a6a4405a3ea2----1---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------) [Michal Malewicz](https://medium.com/@michalmalewicz?source=post_page---read_next_recirc--a6a4405a3ea2----1---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------) [The End of Dashboards and Design SystemsDesign is becoming quietly human again.](https://medium.com/@michalmalewicz/the-end-of-dashboards-and-design-systems-5d98ec9de627?source=post_page---read_next_recirc--a6a4405a3ea2----1---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------) Nov 26, 2025 [A clap icon 6.8KA response icon 283](https://medium.com/@michalmalewicz/the-end-of-dashboards-and-design-systems-5d98ec9de627?source=post_page---read_next_recirc--a6a4405a3ea2----1---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------) ![If You Understand These 5 AI Terms, You’re Ahead of 90% of People](https://miro.medium.com/v2/resize:fit:679/format:webp/1qbVrf-wO9PYtthAj6E4RYQ.png) [![Towards AI](https://miro.medium.com/v2/resize:fill:20:20/1JyIThO-cLjlChQLb6kSlVQ.png)](https://medium.com/towards-artificial-intelligence?source=post_page---read_next_recirc--a6a4405a3ea2----0---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------) In [Towards AI](https://medium.com/towards-artificial-intelligence?source=post_page---read_next_recirc--a6a4405a3ea2----0---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------) by [Shreyas Naphad](https://medium.com/@shreyasnaphad?source=post_page---read_next_recirc--a6a4405a3ea2----0---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------) [If You Understand These 5 AI Terms, You’re Ahead of 90% of PeopleMaster the core ideas behind AI without getting lost](https://medium.com/towards-artificial-intelligence/if-you-understand-these-5-ai-terms-youre-ahead-of-90-of-people-c7622d353319?source=post_page---read_next_recirc--a6a4405a3ea2----0---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------) Mar 29 [A clap icon 9KA response icon 180](https://medium.com/towards-artificial-intelligence/if-you-understand-these-5-ai-terms-youre-ahead-of-90-of-people-c7622d353319?source=post_page---read_next_recirc--a6a4405a3ea2----0---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------) ![6 brain images](https://miro.medium.com/v2/resize:fit:679/format:webp/1Q-mzQNzJSVYkVGgsmHVjfw.png) [![Write A Catalyst](https://miro.medium.com/v2/resize:fill:20:20/1KCHN5TM3Ga2PqZHA4hNbaw.png)](https://medium.com/write-a-catalyst?source=post_page---read_next_recirc--a6a4405a3ea2----1---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------) In [Write A Catalyst](https://medium.com/write-a-catalyst?source=post_page---read_next_recirc--a6a4405a3ea2----1---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------) by [Dr. Patricia Schmidt](https://medium.com/@creatorschmidt?source=post_page---read_next_recirc--a6a4405a3ea2----1---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------) [As a Neuroscientist, I Quit These 5 Morning Habits That Destroy Your BrainMost people do \#1 within 10 minutes of waking (and it sabotages your entire day)](https://medium.com/write-a-catalyst/as-a-neuroscientist-i-quit-these-5-morning-habits-that-destroy-your-brain-3efe1f410226?source=post_page---read_next_recirc--a6a4405a3ea2----1---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------) Jan 14 [A clap icon 46KA response icon 941](https://medium.com/write-a-catalyst/as-a-neuroscientist-i-quit-these-5-morning-habits-that-destroy-your-brain-3efe1f410226?source=post_page---read_next_recirc--a6a4405a3ea2----1---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------) ![I Stopped Using ChatGPT for 30 Days. What Happened to My Brain Was Terrifying.](https://miro.medium.com/v2/resize:fit:679/format:webp/1z4UOJs0b33M4UJXq5MXkww.png) [![Level Up Coding](https://miro.medium.com/v2/resize:fill:20:20/15D9oYBd58pyjMkV_5-zXXQ.jpeg)](https://medium.com/gitconnected?source=post_page---read_next_recirc--a6a4405a3ea2----2---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------) In [Level Up Coding](https://medium.com/gitconnected?source=post_page---read_next_recirc--a6a4405a3ea2----2---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------) by [Kusireddy](https://medium.com/@kusireddy?source=post_page---read_next_recirc--a6a4405a3ea2----2---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------) [I Stopped Using ChatGPT for 30 Days. What Happened to My Brain Was Terrifying.91% of you will abandon 2026 resolutions by January 10th. Here’s how to be in the 9% who actually win.](https://medium.com/gitconnected/i-stopped-using-chatgpt-for-30-days-what-happened-to-my-brain-was-terrifying-70d2a62246c0?source=post_page---read_next_recirc--a6a4405a3ea2----2---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------) Dec 28, 2025 [A clap icon 12.9KA response icon 491](https://medium.com/gitconnected/i-stopped-using-chatgpt-for-30-days-what-happened-to-my-brain-was-terrifying-70d2a62246c0?source=post_page---read_next_recirc--a6a4405a3ea2----2---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------) ![I Woke Up at 4:30 AM Every Day for 30 Days — Here Is What Nobody Tells You](https://miro.medium.com/v2/resize:fit:679/format:webp/10XnPmr19m6XJf9vZ9ojJ-Q.png) [![ILLUMINATION](https://miro.medium.com/v2/resize:fill:20:20/1AZxiin1Cvws3J0TwNUP2sQ.png)](https://medium.com/illumination?source=post_page---read_next_recirc--a6a4405a3ea2----3---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------) In [ILLUMINATION](https://medium.com/illumination?source=post_page---read_next_recirc--a6a4405a3ea2----3---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------) by [Sufyan Maan, M.Eng](https://medium.com/@sufyanmaan?source=post_page---read_next_recirc--a6a4405a3ea2----3---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------) [I Woke Up at 4:30 AM Every Day for 30 Days — Here Is What Nobody Tells YouHere is what actually happened, from someone who did it & tracked everything.](https://medium.com/illumination/i-woke-up-at-4-30-am-every-day-for-30-days-here-is-what-nobody-tells-you-054bf0160903?source=post_page---read_next_recirc--a6a4405a3ea2----3---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------) Apr 4 [A clap icon 7.6KA response icon 329](https://medium.com/illumination/i-woke-up-at-4-30-am-every-day-for-30-days-here-is-what-nobody-tells-you-054bf0160903?source=post_page---read_next_recirc--a6a4405a3ea2----3---------------------14ab1347_299e_488c_8150_00c31505ebf5--------------) [See more recommendations](https://medium.com/?source=post_page---read_next_recirc--a6a4405a3ea2---------------------------------------) [Help](https://help.medium.com/hc/en-us?source=post_page-----a6a4405a3ea2---------------------------------------) [Status](https://status.medium.com/?source=post_page-----a6a4405a3ea2---------------------------------------) [About](https://medium.com/about?autoplay=1&source=post_page-----a6a4405a3ea2---------------------------------------) [Careers](https://medium.com/jobs-at-medium/work-at-medium-959d1a85284e?source=post_page-----a6a4405a3ea2---------------------------------------) [Press](mailto:pressinquiries@medium.com) [Blog](https://blog.medium.com/?source=post_page-----a6a4405a3ea2---------------------------------------) [Privacy](https://policy.medium.com/medium-privacy-policy-f03bf92035c9?source=post_page-----a6a4405a3ea2---------------------------------------) [Rules](https://policy.medium.com/medium-rules-30e5502c4eb4?source=post_page-----a6a4405a3ea2---------------------------------------) [Terms](https://policy.medium.com/medium-terms-of-service-9db0094a1e0f?source=post_page-----a6a4405a3ea2---------------------------------------) [Text to speech](https://speechify.com/medium?source=post_page-----a6a4405a3ea2---------------------------------------)
Readable Markdown	[![Boy with Silver Wings](https://miro.medium.com/v2/resize:fill:32:32/1i-pR-xLX7Fyvri2Fcut9qw.jpeg)](https://medium.com/@agney?source=post_page---byline--a6a4405a3ea2---------------------------------------) 2 min read Jan 1, 2017 Detect if an element is visible in the view port. Now why would any one in the right mind want to do that? Well you are reading this, so may be you know why. Press enter or click to view image in full size ![](https://miro.medium.com/v2/resize:fit:700/1ErXwPjnEwghWwqwdCtxaMg.jpeg) Small Experiment on Codepen I have to warn you that there are already plugins that help us do the same with jQuery like 1. <https://github.com/customd/jquery-visible> 2. <http://www.appelsiini.net/projects/viewport> While all these exist, how many plugins shall we ship with our website? How is the user going to cache them all? Let’s take a peek into how this is done. PS: I’m not going to be talking about jQuery :visible selector. This selector selects elements based on display CSS property or opacity. We are going to be discussing how to detect if an element is visible on screen in real time. Here is a codepen demo of what we will be doing. This started with [this question](http://stackoverflow.com/questions/41416863/changing-color-when-specific-div-is-visible) on Stackoverflow for which my answer is [here](http://stackoverflow.com/a/41417072/4374566). It has been made to suit the question with some borrowed code from [this stackoverflow answer](http://stackoverflow.com/a/33979503/4374566). Get Boy with Silver Wings’s stories in your inbox Join Medium for free to get updates from this writer. Remember me for faster sign in Enough with the How I got here lesson. Getting to the JS part. ``` $.fn.isInViewport = function() { var elementTop = $(this).offset().top; var elementBottom = elementTop + $(this).outerHeight();var viewportTop = $(window).scrollTop(); var viewportBottom = viewportTop + $(window).height();return elementBottom > viewportTop && elementTop < viewportBottom; }; ``` This forms the part of JS that concerns us most. To check if an element is in the viewport, we need four variables. These being: - elementTop : Top position of the element. - offset function is used to find the position relative to parent element(body in this case) and top refers to the distance from the top. - elementBottom: Bottom position of element - 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](http://api.jquery.com/outerheight/) which allows us to find the height of element including border, padding and optionally padding. - viewportTop: Top of the Viewport - Can be found with the [scrollTop](https://api.jquery.com/scrollTop/) function on window object. Conveniently returns the relative position from the scrollbar position to object matched, which in this case is our window. - viewportBottom: Bottom of Viewport - Same as elementBottom. We add height of window to the viewportTop to find bottom. All that is left is to find if the element is within the window coordinates. ``` ] $(window).on(‘resize scroll’, function() { //Code here }); ``` By wrapping the elements required on a resize, scroll event, we have successfully build the platform to find if an element is in the viewport or not. Happy Coding
Shard	77 (laksa)
Root Hash	13179037029838926277
Unparsed URL	com,medium!/talk-like/detecting-if-an-element-is-in-the-viewport-jquery-a6a4405a3ea2 s443