🕷️ Crawler Inspector

URL Lookup

Direct Parameter Lookup

Raw Queries and Responses

1. Shard Calculation

Query:

Response:

Calculated Shard: 175 (from laksa172)

2. Crawled Status Check

Query:

curl -X POST \
  'http://laksa175.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://infoheap.com/jquery-check-if-element-is-visible-in-viewport/\')), getAhrefsUnparsedNoserviceFromURL(\'https://infoheap.com/jquery-check-if-element-is-visible-in-viewport/\'))) FORMAT JSONEachRow'

Response:

{"found_url":"https:\/\/infoheap.com\/jquery-check-if-element-is-visible-in-viewport\/","crawl_time":1775977946,"first_indexed_time":1637909821,"http_code":200,"src_unparsed":"com,infoheap!\/jquery-check-if-element-is-visible-in-viewport\/ s443","src_root_hash":"12557530982376942175","history_drop_reason":null,"meta_title":"jQuery - check if element is visible in viewport ofter scroll - InfoHeap","meta_descriptions":["How to make a div stick at top when a page is scrolled down by manipulating css position propery of div in jQuery - InfoHeap - Tech"],"attrs_boilerpipe_text":"Home\n>\nTutorials\n>\nJavascript\n>\njQuery\nTo check if an element is visible in window viewport after vertical scrolling the following approach can be used using jQuery. Note that this approach assumes that there is no horizontal scrolling. Similar approach can be applied to check visibility in case there is horizontal scrolling.\nWindow top can be obtained using\n$(window).scrollTop()\nand height can be obtained using\n$(window).height()\n.\nSimilarly element top can be obtained using\n$(el).offset().top\nand its height can be obtained using\n$(el).height()\n.\nExample\nHere is the outcome screenshot and code to check if an element is visible in window viewport.\n<style>.largebox {height: 800px;}<\/style>\n\n<div id=\"msg\" style=\"position:fixed;left:30%;\"><\/div>\n<div id=\"box1\" class=\"box\">box1<\/div>\n<div class=\"largebox\">box2<\/div>\n\n<script src=\"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.1.4\/jquery.min.js\"><\/script>\n<script type=\"text\/javascript\">\nfunction isVisible($el) {\n  var winTop = $(window).scrollTop();\n  var winBottom = winTop + $(window).height();\n  var elTop = $el.offset().top;\n  var elBottom = elTop + $el.height();\n  return ((elBottom<= winBottom) && (elTop >= winTop));\n}\n$(function() {\n  $(\"#msg\").text(\"#box1 visible=\" + isVisible($(\"#box1\")));\n  $(window).scroll(function() {\n    $(\"#msg\").text(\"#box1 visible=\" + isVisible($(\"#box1\")));\n  });\n});\n<\/script>\nShare this article:","attrs_markdown":"[![InfoHeap](https:\/\/infoheap.com\/img\/infoheap.png)](https:\/\/infoheap.com\/tech\/ \"InfoHeap\")\n\nTech\n\nNavigation\n\n- [Home](https:\/\/infoheap.com\/tech\/)\n- [Tutorials](https:\/\/infoheap.com\/tutorials\/)\n  - [CSS tutorials & examples](https:\/\/infoheap.com\/topic\/css\/)\n  - [CSS properties](https:\/\/infoheap.com\/topic\/css-property\/)\n  - [Javascript cookbook](https:\/\/infoheap.com\/topic\/javascript-cookbook\/)\n  - [Linux\/Unix Command Line](https:\/\/infoheap.com\/topic\/command-line\/)\n  - [Mac](https:\/\/infoheap.com\/topic\/mac\/)\n  - [PHP](https:\/\/infoheap.com\/topic\/php\/)\n    - [PHP functions online](https:\/\/infoheap.com\/topic\/php-functions-online\/)\n    - [PHP regex](https:\/\/infoheap.com\/topic\/php-regex\/)\n  - [WordPress](https:\/\/infoheap.com\/topic\/wordpress\/)\n- [Online Tools](https:\/\/infoheap.com\/tool\/)\n  - [Text utilities](https:\/\/infoheap.com\/topic\/string-utilities\/)\n  - [Online Lint Tools](https:\/\/infoheap.com\/topic\/lint\/)\n\n![search](data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3\/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAfdEVYdEF1dGhvcgBTZXJnaW8gTHVpeiBBcmF1am8gU2lsdmHhr4BUAAAASXRFWHRDb3B5cmlnaHQAUHVibGljIERvbWFpbiBodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9saWNlbnNlcy9wdWJsaWNkb21haW4vWcP+ygAABAxJREFUSImtll1sVGUQhp8527K7titspa01ykIp5YYfbcOdVTSCoCGEO7wzEQm0\/MQsBIheSdJasyY2MdFWBCPckZgQk2KpUFEumraYthE1NAXbgoFtKGlooN3dM+PF2W632wIhOsnJ5JzJmZn3nZ\/vEzMDQESktbW1srCw8OVEIuFTVeHJJHHu3Lm2WCw2CqQs7VjMjEuXLq0qKir6IhwOrw6Hw0VP6BgAM+PmzZu34\/F4bzQafa+zs\/O2maUApL+\/\/wf7n+T+\/fva1NR0HFgMiHPy5MmiUChUZWZM0\/VfJBgMSmVl5WbgBcCXB0T8gcBCVQURxAwRj34RYWJigsGBAcbGxlhWXs6SSATHcR4ZZMGCBSFgCTCQd+\/evTxTFVVDxDAEEUPN+P70ab47cYJkMpn5ORKJcPDIESpXrnxoAFX1AQuBfEdVxQzUFFXL6M9jMb5paSGZTBIIBFheUQHA0NAQ++vq6O\/rexxbPkDyAMwUVUUQEOjp7qa9rQ0R4f1du9mw6U0Knirg7+vXOH7sGD1dXTTW1\/PtqVPk5+c\/MooDoGaZ7E2NC+3tAFRVV7Nl61aCgQBqSmTpUmr37kVEGI3H6e\/rQ9VD7DXJQwKYGaYzFF2\/dh2ADZs2z1CXtheXlLD2pSoABgcHve9pBiyjLSeAWhqF56SwsACA4aGhWXVRU9RV\/rkxAkDA7\/ey16wkcmBkEEwbVZWKFZUAtLf9iOu6s5x0d3URj8cREVatXjOnOXIReEXGM4gIBmzdto2LHRcYjcf5YE8dm956m+UrKuj46TwXf+4AoKS0lMXFxagagnkzJIaYPAzBDIqnFy1i9779+P1+RoaH+fqrLzkcjdJ2tpXJBw8AuH3rFp821JNIJNLNoWmK56mB6zKnmFXV1TTEPuOV9etZFC4iFAqxrLycd3fsYM3aFwHo6uzkk6NHmZycmkVVdhXSc+DxPA3R0rq0rIxde\/bhbQ7J6Dc2biTW2Ejv5cv8drmHhqMfc+jDj\/D7\/R7NmttFmTad58ktoik+Xz4HDh2met06APp7e2k725ppFpgnwHyOLENZFr\/poI7jsP\/AQV597XWCwSDPlj03M3TZFE1NTU2mUq6raoC3SQXD0l2ByRzqEEMQHMdhZ20dO2trEcdheiOnUikDXMCcaDQ6eHfszo3p6mfPw5whmg+hKWbM2F2XgatXJ4BxIJkHTI6MDJ8JBIPLiktKAyKOl3n22ZCjMwhz+j+lKf768w+3paXlV2AYmBRAgGdqamre2b59+76CUKjYXPXNZhJv08685NgcRODKld\/Hm5ubfxkfHz8DnAfuiHlZ5QFh4Hm8k2gh3j5\/EnHTtAwDN4C7ZpaS7GsL3lz4gfy5eT5WDEgCU2RdW\/4FM6YzETegIUgAAAAASUVORK5CYII=)\n\n![](https:\/\/infoheap.com\/wp-content\/themes\/shell-master\/images\/menu-icon.png)\n\n## jQuery tutorials\n### jQuery Ajax\n- [jQuery JSONP](https:\/\/infoheap.com\/jquery-jsonp-cross-domain-ajax\/)\n- [jQuery .post()](https:\/\/infoheap.com\/jquery-post\/)\n- [jQuery .load()](https:\/\/infoheap.com\/jquery-ajax-load\/)\n- [load script with cache enabled](https:\/\/infoheap.com\/jquery-load-script-with-cache-enabled\/)\n- [jQuery .ajax() file upload](https:\/\/infoheap.com\/jquery-ajax-post-a-form-having-file-uploads\/)\n### jQuery CSS\n- [change table cells color based on value](https:\/\/infoheap.com\/jquery-change-table-cells-color-based-on-values\/)\n- [check if element is visible in viewport](https:\/\/infoheap.com\/jquery-check-if-element-is-visible-in-viewport\/)\n- [display auto fade out message](https:\/\/infoheap.com\/jquery-display-auto-fade-out-message\/)\n- [fitvids.js for automatically resizing videos](https:\/\/infoheap.com\/fitvids-fluid-width-videos\/)\n- [get class list of an element](https:\/\/infoheap.com\/jquery-get-class-list\/)\n- [jQuery toggleClass() examples](https:\/\/infoheap.com\/jquery-toggleclass\/)\n- [make a div stick at top on scroll](https:\/\/infoheap.com\/jquery-make-a-div-stick-at-top-on-scroll\/)\n- [table with alternate color rows](https:\/\/infoheap.com\/html-table-with-alternate-color-rows\/)\n### jQuery Events\n- [Javascript\/jQuery - disable right click](https:\/\/infoheap.com\/javascript-jquery-disable-right-click\/)\n- [jQuery - text input field - change keyup and paste events](https:\/\/infoheap.com\/jquery-text-input-field-change-keyup-paste-events\/)\n- [trigger click using jQuery or Javascript](https:\/\/infoheap.com\/javascript-jquery-trigger-click\/)\n### jQuery DOM\n- [jQuery html() vs text()](https:\/\/infoheap.com\/jquery-difference-between-html-and-text\/)\n- [Check if an element exists](https:\/\/infoheap.com\/jquery-check-if-an-element-exists\/)\n- [find total DOM elements](https:\/\/infoheap.com\/jquery-total-number-of-dom-elements\/)\n- [jQuery encode string to html entities](https:\/\/infoheap.com\/jquery-encode-string-html-entities\/)\n- [jQuery - read and modify iframe content](https:\/\/infoheap.com\/jquery-read-modify-iframe-content\/)\n- [jQuery - create iframe with content](https:\/\/infoheap.com\/jquery-create-iframe-with-content\/)\n- [jQuery - find select element selectedIndex, value and text](https:\/\/infoheap.com\/jquery-select-selected-index-value-and-text\/)\n- [jQuery - get checkbox value and checked state](https:\/\/infoheap.com\/jquery-checkbox-value-and-state\/)\n- [jQuery - get javascript object](https:\/\/infoheap.com\/jquery-get-javascript-object\/)\n### jQuery Cookbook\n- [get jQuery version](https:\/\/infoheap.com\/jquery-get-version-info\/)\n- [jQuery - add text to existing div](https:\/\/infoheap.com\/jquery-add-text-existing-div\/)\n- [jQuery sliding effect - slideUp, slideDown, slideToggle](https:\/\/infoheap.com\/jquery-sliding-effect-slideup-slidedown-slidetoggle\/)\n### jQuery UI\n- [jQuery UI make element movable](https:\/\/infoheap.com\/jquery-ui-make-element-draggable\/)\n- [jQuery ui slider and input text box - one way binding](https:\/\/infoheap.com\/jquery-ui-slider-input-text-box-one-way-binding\/)\n- [jQuery ui slider and input text box - two way binding](https:\/\/infoheap.com\/jquery-ui-slider-and-input-text-box-two-way-binding\/)\n\n- [Home](https:\/\/infoheap.com\/tech\/ \"Home\")\n- \\> [Tutorials](https:\/\/infoheap.com\/tutorials\/ \"Tutorials\")\n- \\> [Javascript](https:\/\/infoheap.com\/topic\/javascript\/ \"Javascript\")\n- \\> [jQuery](https:\/\/infoheap.com\/topic\/jquery\/ \"jQuery\")\n# [jQuery – check if element is visible in viewport ofter scroll](https:\/\/infoheap.com\/jquery-check-if-element-is-visible-in-viewport\/)\non\n\nApr 2, 2016\n\nTo check if an element is visible in window viewport after vertical scrolling the following approach can be used using jQuery. Note that this approach assumes that there is no horizontal scrolling. Similar approach can be applied to check visibility in case there is horizontal scrolling.\n\n1. Window top can be obtained using `$(window).scrollTop()` and height can be obtained using `$(window).height()`.\n2. Similarly element top can be obtained using `$(el).offset().top` and its height can be obtained using `$(el).height()`.\n## Example\nHere is the outcome screenshot and code to check if an element is visible in window viewport.  \n ![jquery-check-element-visible-in-viewport](https:\/\/infoheap.com\/wp-content\/uploads\/2016\/04\/jquery-check-element-visible-in-viewport.png)\n\n```\n<style>.largebox {height: 800px;}<\/style>\n\n<div id=\"msg\" style=\"position:fixed;left:30%;\"><\/div>\n<div id=\"box1\" class=\"box\">box1<\/div>\n<div class=\"largebox\">box2<\/div>\n\n<script src=\"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.1.4\/jquery.min.js\"><\/script>\n<script type=\"text\/javascript\">\nfunction isVisible($el) {\n  var winTop = $(window).scrollTop();\n  var winBottom = winTop + $(window).height();\n  var elTop = $el.offset().top;\n  var elBottom = elTop + $el.height();\n  return ((elBottom<= winBottom) && (elTop >= winTop));\n}\n$(function() {\n  $(\"#msg\").text(\"#box1 visible=\" + isVisible($(\"#box1\")));\n  $(window).scroll(function() {\n    $(\"#msg\").text(\"#box1 visible=\" + isVisible($(\"#box1\")));\n  });\n});\n<\/script>\n```\n[refresh]() done\n\n[try it online](https:\/\/infoheap.com\/html-js-css-sandbox\/code\/12276-code1\/)\n\n### Suggested posts:\n1. [CSS resize – make block element resizable by user](https:\/\/infoheap.com\/css-resize-property\/ \"CSS resize – make block element resizable by user\")\n2. [egrep pipe example on Apache access log](https:\/\/infoheap.com\/egrep-pipe-example-apache-access-log\/ \"egrep pipe example on Apache access log\")\n3. [CSS general sibling selector](https:\/\/infoheap.com\/css-general-sibling-selector\/ \"CSS general sibling selector\")\n4. [Jquery – change table cells color based on value](https:\/\/infoheap.com\/jquery-change-table-cells-color-based-on-values\/ \"Jquery – change table cells color based on value\")\n5. [Vim (vi) – multiline search replace with confirmation](https:\/\/infoheap.com\/vi-multiline-search-replace-with-confirmation\/ \"Vim (vi) – multiline search replace with confirmation\")\n6. [CSS attribute substring selectors](https:\/\/infoheap.com\/css-attribute-substring-selectors\/ \"CSS attribute substring selectors\")\n7. [CSS animation shorthand property](https:\/\/infoheap.com\/css-animation-property\/ \"CSS animation shorthand property\")\n8. [CSS attribute presence and value selectors](https:\/\/infoheap.com\/css-attribute-selectors\/ \"CSS attribute presence and value selectors\")\n\nShare this article: [![share on facebook](data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAABGdBTUEAALGPC\/xhBQAAAHtQTFRFS2ehO1iYO1mYuMPaeo65kqPHj6HFkaLFqbbSqrfSW3SpYHirZHytTGehh5nAvsjdytLjdIm2majJydHjSmagm6rK5ury2uDsiZvBnq3MzdXlU22lUWykQ2CcUGujf5K8eI245Ojx2+DsbIOybYS0aoGyXner\/\/\/\/O1mYVL1EzQAAAAN0Uk5T\/pz+wt2ACQAAAIJJREFUGNOVkMsSgjAQBDcoDxVRUVEBAQ0y+f8vdAMValOc6MPOVB\/msKQCY5muLYrmzrz3h8YEJMQJQGKMUDkb7Dx1Bc5Z6qkHcLE5q6YrgHs3CNVi5LVUT6GO+gPE+ubNfwHtza9W9c\/B8xFHTVXvYBVyVESDY1OWWw4iJR82vvAPAnos27XirR8AAAAASUVORK5CYII=)](http:\/\/www.facebook.com\/share.php?u=https%3A%2F%2Finfoheap.com%2Fjquery-check-if-element-is-visible-in-viewport%2F \"share on facebook\") [![share on linkedin](data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAABGdBTUEAALGPC\/xhBQAAANtQTFRFHoe0HYu0HYy2SaLDHoy1Z7LNLpS6cbfRW6zKX63LbrXPQZ7BttrnIo+3Mpe8ZrHN0OfwV6rIdbjS8Pf6T6bGXq3KKpK6utzoq9TjlcncI4+3X67L\/v\/\/R6HDOJq+uNvons3fudvo+\/3+LpW7QJ7AMJW7\/P7+IY622+3zzebvT6XFJpG4LZS6N5m+KpO5QJ7BL5W7RqHDN5m9Ho21RKDC3e70PZy\/II62P53AKJK5II22H422KZK5MJa7J5G4stjmSKLDjsbaJJC3OZq+gL\/WVqnIK5O6\/\/\/\/HYy1MNFfvgAAAAN0Uk5TEYLlPkfhpwAAAKpJREFUGNOl0MUSAjEURNEkuLu7u\/sYkDDz+v+\/CKiCqhm23OXZdTPGxS6YNHtzx7jMThCcMe73haKpgj3dnLdrawdwJvaBSCbf6C9MS8M7wTQ7nD7UzMsJ35gVyxJV4IpVjWK5dPQQoEupQcoRnKP+IZvo4RC1OkMarzxUpy7RxEO5c\/NAtHRTHGgT7d10Be5Et39IQCpl6EoNAEepxGs2x0\/vw4QbXhc+AXHZSj9dq1VHAAAAAElFTkSuQmCC)](http:\/\/www.linkedin.com\/shareArticle?mini=true&url=https%3A%2F%2Finfoheap.com%2Fjquery-check-if-element-is-visible-in-viewport%2F&title=jQuery+%E2%80%93+check+if+element+is+visible+in+viewport+ofter+scroll \"share on linkedin\") [![tweet this](data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAABGdBTUEAALGPC\/xhBQAAAQtQTFRFlvDwm+vtm+vutPDyse\/yu\/H0y\/X2yfT2p+3wq+7xnOHrlObsJZPPKZXPJpTPQKnXQafWJ5XQetDkHo7NpO3wL5HLLI\/Kt\/Hzo+3vec\/je9HkYLjaj+LrI5jTGpbUJpzVFYPIQKDRqu7xkN\/qGoPHY8DefdLkRK\/aT63WjOHqg9fnjeDqn+zvV7PYU7DXru\/xRqjVa8njFpzaTrHZF5zZSrDZUrfcj+PrPq3bIZzXqu7wkOPrxfP1wPL0uPHzvPL0r+\/xoOzvJZzWFYjLFYzOFZDRouzvWLTYVLvghdzpVrzgnOvupe3ws\/Dypu3woezvFZnXFZTUnevuFZ3bFZjXFX3DFYTIFX\/Fm+vuhwZ4lQAAAAN0Uk5TEYLlPkfhpwAAAMhJREFUGNNjYGBk8vbh8PMRkXDzdwyKYGJkYGCMYGZjt7G1F\/fVt\/Jx9I6IYGRgYgHy7XwdlPz8gyJAgInBm9XOl0tUTBnCBwEGfwdOP+nQUN0IhJCOW1CEe2ioBpIQiAAKKUoKSalpI4T0wiFARQsuZKAQBgGqcCFjZ2dhXkE+HgEZuJCpiws\/mvFmrq6y3KhCnoGBgXJOTvLqCKEIyxAgCAgIMEQIWVuYBAOBkSdYiAligLmXh4eXJsTbjBFoABRgTMgCwCAEAClGWD0Fbk5KAAAAAElFTkSuQmCC)](https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Finfoheap.com%2Fjquery-check-if-element-is-visible-in-viewport%2F&text=jQuery+%E2%80%93+check+if+element+is+visible+in+viewport+ofter+scroll \"tweet this\") [![submit to reddit](data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAABGdBTUEAALGPC\/xhBQAAAGBQTFRFMlp3XajeUZPCbrXpYa7m\/1RU\/7a2\/42NWqLWanB1\/ykpLDI3fn9\/SHaYTIexlpib3Nzc7+npU5bFqdz\/P2WAvL29d8b\/hsz\/Zbfy+\/j4O0ZOOlFhldP\/T1lg\/\/\/\/a8H\/8uv2PAAAAAV0Uk5TGOCJ+voZW6nwAAAAw0lEQVQY002QjY7EIAiE1fWu7fbPenarWOH933KHXjfZSTDMFwKCMc76x0feW2eMk\/MPOs\/zOF4vEXHGHl8+A1njPz6mmhr14s3jrvdjjCOHBOTVQ2lBrC0q0gZ5TkSASxRFc6Pa9o1LWJGQB6LSdr41rSEB1Wnn3w6+65TNQD0x\/zyBnngCZW3fmMsGVAqiXhMrUu2GEbwvF+pb4Wmkcdg41HwhiToSJWUFAbKiP61tGFpd5Frb\/e8jOd+JHsz6L+GEb6ULGUOGoZJpAAAAAElFTkSuQmCC)](http:\/\/www.reddit.com\/submit?url=https%3A%2F%2Finfoheap.com%2Fjquery-check-if-element-is-visible-in-viewport%2F&title=jQuery+%E2%80%93+check+if+element+is+visible+in+viewport+ofter+scroll \"submit to reddit\")\n\nPosted in [Tutorials](https:\/\/infoheap.com\/category\/tutorial\/) \\| Tagged [CSS](https:\/\/infoheap.com\/topic\/css\/), [jQuery](https:\/\/infoheap.com\/topic\/jquery\/), [Tutorials](https:\/\/infoheap.com\/topic\/tutorials\/)\n\n- [Browse content](https:\/\/infoheap.com\/browse\/)\n- [Article Topics](https:\/\/infoheap.com\/cat-list\/)\n- [Article archives](https:\/\/infoheap.com\/archives\/)\n- [Contact Us](https:\/\/infoheap.com\/contact-us\/)\n\nPopular Topics: [Android Development](https:\/\/infoheap.com\/topic\/android-development\/ \"Android Development\") \\| [AngularJS](https:\/\/infoheap.com\/topic\/angularjs\/ \"AngularJS\") \\| [Apache](https:\/\/infoheap.com\/topic\/apache\/ \"Apache\") \\| [AWS and EC2](https:\/\/infoheap.com\/topic\/aws\/ \"AWS and EC2\") \\| [Bash shell scripting](https:\/\/infoheap.com\/topic\/bash\/ \"Bash shell scripting\") \\| [Chrome developer tools](https:\/\/infoheap.com\/topic\/chrome-developer-tools\/ \"Chrome developer tools\") \\| [Company results](https:\/\/infoheap.com\/topic\/company-results\/ \"Company results\") \\| [CSS](https:\/\/infoheap.com\/topic\/css\/ \"CSS\") \\| [CSS cookbook](https:\/\/infoheap.com\/topic\/css-cookbook\/ \"CSS cookbook\") \\| [CSS properties](https:\/\/infoheap.com\/topic\/css-property\/ \"CSS properties\") \\| [CSS Pseudo Classes](https:\/\/infoheap.com\/topic\/css-pseudo-classes\/ \"CSS Pseudo Classes\") \\| [CSS selectors](https:\/\/infoheap.com\/topic\/css-selector\/ \"CSS selectors\") \\| [CSS3](https:\/\/infoheap.com\/topic\/css3\/ \"CSS3\") \\| [CSS3 flexbox](https:\/\/infoheap.com\/topic\/css-flexbox\/ \"CSS3 flexbox\") \\| [Devops](https:\/\/infoheap.com\/topic\/devops\/ \"Devops\") \\| [Git](https:\/\/infoheap.com\/topic\/git\/ \"Git\") \\| [HTML](https:\/\/infoheap.com\/topic\/html\/ \"HTML\") \\| [HTML5](https:\/\/infoheap.com\/topic\/html5\/ \"HTML5\") \\| [Java](https:\/\/infoheap.com\/topic\/java\/ \"Java\") \\| [Javascript](https:\/\/infoheap.com\/topic\/javascript\/ \"Javascript\") \\| [Javascript cookbook](https:\/\/infoheap.com\/topic\/javascript-cookbook\/ \"Javascript cookbook\") \\| [Javascript DOM](https:\/\/infoheap.com\/topic\/javascript-dom\/ \"Javascript DOM\") \\| [jQuery](https:\/\/infoheap.com\/topic\/jquery\/ \"jQuery\") \\| [Kubernetes](https:\/\/infoheap.com\/topic\/kubernetes\/ \"Kubernetes\") \\| [Linux](https:\/\/infoheap.com\/topic\/linux\/ \"Linux\") \\| [Linux\/Unix Command Line](https:\/\/infoheap.com\/topic\/command-line\/ \"Linux\/Unix Command Line\") \\| [Mac](https:\/\/infoheap.com\/topic\/mac\/ \"Mac\") \\| [Mac Command Line](https:\/\/infoheap.com\/topic\/mac-command-line\/ \"Mac Command Line\") \\| [Mysql](https:\/\/infoheap.com\/topic\/mysql\/ \"Mysql\") \\| [Networking](https:\/\/infoheap.com\/topic\/networking\/ \"Networking\") \\| [Node.js](https:\/\/infoheap.com\/topic\/node-js\/ \"Node.js\") \\| [Online Tools](https:\/\/infoheap.com\/topic\/online-tools\/ \"Online Tools\") \\| [PHP](https:\/\/infoheap.com\/topic\/php\/ \"PHP\") \\| [PHP cookbook](https:\/\/infoheap.com\/topic\/php-cookbook\/ \"PHP cookbook\") \\| [PHP Regex](https:\/\/infoheap.com\/topic\/php-regex\/ \"PHP Regex\") \\| [Python](https:\/\/infoheap.com\/topic\/python\/ \"Python\") \\| [Python array](https:\/\/infoheap.com\/topic\/python-array\/ \"Python array\") \\| [Python cookbook](https:\/\/infoheap.com\/topic\/python-cookbook\/ \"Python cookbook\") \\| [SEO](https:\/\/infoheap.com\/topic\/seo\/ \"SEO\") \\| [Site Performance](https:\/\/infoheap.com\/topic\/site-performance\/ \"Site Performance\") \\| [SSH](https:\/\/infoheap.com\/topic\/ssh\/ \"SSH\") \\| [Ubuntu Linux](https:\/\/infoheap.com\/topic\/ubuntu\/ \"Ubuntu Linux\") \\| [Web Development](https:\/\/infoheap.com\/topic\/web-development\/ \"Web Development\") \\| [Webmaster](https:\/\/infoheap.com\/topic\/webmaster\/ \"Webmaster\") \\| [Wordpress](https:\/\/infoheap.com\/topic\/wordpress\/ \"Wordpress\") \\| [Wordpress customization](https:\/\/infoheap.com\/topic\/wordpress-customization\/ \"Wordpress customization\") \\| [Wordpress How To](https:\/\/infoheap.com\/topic\/wordpress-how-to\/ \"Wordpress How To\") \\| [Wordpress Mysql Queries](https:\/\/infoheap.com\/topic\/wordpress-mysql-query\/ \"Wordpress Mysql Queries\") \\| [InfoHeap Money](https:\/\/infoheap.com\/) \\| [InfoHeap Mutual Funds](https:\/\/infoheap.com\/mutual-funds\/)\n\nCopyright © 2026 [InfoHeap](https:\/\/infoheap.com\/ \"InfoHeap\").\n\nPowered by [WordPress](http:\/\/wordpress.org\/ \"State-of-the-art semantic personal publishing platform\")","attrs_readable_markdown":"- [Home](https:\/\/infoheap.com\/tech\/ \"Home\")\n- \\> [Tutorials](https:\/\/infoheap.com\/tutorials\/ \"Tutorials\")\n- \\> [Javascript](https:\/\/infoheap.com\/topic\/javascript\/ \"Javascript\")\n- \\> [jQuery](https:\/\/infoheap.com\/topic\/jquery\/ \"jQuery\")\n\nTo check if an element is visible in window viewport after vertical scrolling the following approach can be used using jQuery. Note that this approach assumes that there is no horizontal scrolling. Similar approach can be applied to check visibility in case there is horizontal scrolling.\n\n1. Window top can be obtained using `$(window).scrollTop()` and height can be obtained using `$(window).height()`.\n2. Similarly element top can be obtained using `$(el).offset().top` and its height can be obtained using `$(el).height()`.\n## Example\nHere is the outcome screenshot and code to check if an element is visible in window viewport.  \n ![jquery-check-element-visible-in-viewport](https:\/\/infoheap.com\/wp-content\/uploads\/2016\/04\/jquery-check-element-visible-in-viewport.png)\n```\n<style>.largebox {height: 800px;}<\/style>\n\n<div id=\"msg\" style=\"position:fixed;left:30%;\"><\/div>\n<div id=\"box1\" class=\"box\">box1<\/div>\n<div class=\"largebox\">box2<\/div>\n\n<script src=\"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.1.4\/jquery.min.js\"><\/script>\n<script type=\"text\/javascript\">\nfunction isVisible($el) {\n  var winTop = $(window).scrollTop();\n  var winBottom = winTop + $(window).height();\n  var elTop = $el.offset().top;\n  var elBottom = elTop + $el.height();\n  return ((elBottom<= winBottom) && (elTop >= winTop));\n}\n$(function() {\n  $(\"#msg\").text(\"#box1 visible=\" + isVisible($(\"#box1\")));\n  $(window).scroll(function() {\n    $(\"#msg\").text(\"#box1 visible=\" + isVisible($(\"#box1\")));\n  });\n});\n<\/script>\n```\n\nShare this article: [![share on facebook](data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAABGdBTUEAALGPC\/xhBQAAAHtQTFRFS2ehO1iYO1mYuMPaeo65kqPHj6HFkaLFqbbSqrfSW3SpYHirZHytTGehh5nAvsjdytLjdIm2majJydHjSmagm6rK5ury2uDsiZvBnq3MzdXlU22lUWykQ2CcUGujf5K8eI245Ojx2+DsbIOybYS0aoGyXner\/\/\/\/O1mYVL1EzQAAAAN0Uk5T\/pz+wt2ACQAAAIJJREFUGNOVkMsSgjAQBDcoDxVRUVEBAQ0y+f8vdAMValOc6MPOVB\/msKQCY5muLYrmzrz3h8YEJMQJQGKMUDkb7Dx1Bc5Z6qkHcLE5q6YrgHs3CNVi5LVUT6GO+gPE+ubNfwHtza9W9c\/B8xFHTVXvYBVyVESDY1OWWw4iJR82vvAPAnos27XirR8AAAAASUVORK5CYII=)](http:\/\/www.facebook.com\/share.php?u=https%3A%2F%2Finfoheap.com%2Fjquery-check-if-element-is-visible-in-viewport%2F \"share on facebook\") [![share on linkedin](data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAABGdBTUEAALGPC\/xhBQAAANtQTFRFHoe0HYu0HYy2SaLDHoy1Z7LNLpS6cbfRW6zKX63LbrXPQZ7BttrnIo+3Mpe8ZrHN0OfwV6rIdbjS8Pf6T6bGXq3KKpK6utzoq9TjlcncI4+3X67L\/v\/\/R6HDOJq+uNvons3fudvo+\/3+LpW7QJ7AMJW7\/P7+IY622+3zzebvT6XFJpG4LZS6N5m+KpO5QJ7BL5W7RqHDN5m9Ho21RKDC3e70PZy\/II62P53AKJK5II22H422KZK5MJa7J5G4stjmSKLDjsbaJJC3OZq+gL\/WVqnIK5O6\/\/\/\/HYy1MNFfvgAAAAN0Uk5TEYLlPkfhpwAAAKpJREFUGNOl0MUSAjEURNEkuLu7u\/sYkDDz+v+\/CKiCqhm23OXZdTPGxS6YNHtzx7jMThCcMe73haKpgj3dnLdrawdwJvaBSCbf6C9MS8M7wTQ7nD7UzMsJ35gVyxJV4IpVjWK5dPQQoEupQcoRnKP+IZvo4RC1OkMarzxUpy7RxEO5c\/NAtHRTHGgT7d10Be5Et39IQCpl6EoNAEepxGs2x0\/vw4QbXhc+AXHZSj9dq1VHAAAAAElFTkSuQmCC)](http:\/\/www.linkedin.com\/shareArticle?mini=true&url=https%3A%2F%2Finfoheap.com%2Fjquery-check-if-element-is-visible-in-viewport%2F&title=jQuery+%E2%80%93+check+if+element+is+visible+in+viewport+ofter+scroll \"share on linkedin\") [![tweet this](data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAABGdBTUEAALGPC\/xhBQAAAQtQTFRFlvDwm+vtm+vutPDyse\/yu\/H0y\/X2yfT2p+3wq+7xnOHrlObsJZPPKZXPJpTPQKnXQafWJ5XQetDkHo7NpO3wL5HLLI\/Kt\/Hzo+3vec\/je9HkYLjaj+LrI5jTGpbUJpzVFYPIQKDRqu7xkN\/qGoPHY8DefdLkRK\/aT63WjOHqg9fnjeDqn+zvV7PYU7DXru\/xRqjVa8njFpzaTrHZF5zZSrDZUrfcj+PrPq3bIZzXqu7wkOPrxfP1wPL0uPHzvPL0r+\/xoOzvJZzWFYjLFYzOFZDRouzvWLTYVLvghdzpVrzgnOvupe3ws\/Dypu3woezvFZnXFZTUnevuFZ3bFZjXFX3DFYTIFX\/Fm+vuhwZ4lQAAAAN0Uk5TEYLlPkfhpwAAAMhJREFUGNNjYGBk8vbh8PMRkXDzdwyKYGJkYGCMYGZjt7G1F\/fVt\/Jx9I6IYGRgYgHy7XwdlPz8gyJAgInBm9XOl0tUTBnCBwEGfwdOP+nQUN0IhJCOW1CEe2ioBpIQiAAKKUoKSalpI4T0wiFARQsuZKAQBgGqcCFjZ2dhXkE+HgEZuJCpiws\/mvFmrq6y3KhCnoGBgXJOTvLqCKEIyxAgCAgIMEQIWVuYBAOBkSdYiAligLmXh4eXJsTbjBFoABRgTMgCwCAEAClGWD0Fbk5KAAAAAElFTkSuQmCC)](https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Finfoheap.com%2Fjquery-check-if-element-is-visible-in-viewport%2F&text=jQuery+%E2%80%93+check+if+element+is+visible+in+viewport+ofter+scroll \"tweet this\") [![submit to reddit](data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAABGdBTUEAALGPC\/xhBQAAAGBQTFRFMlp3XajeUZPCbrXpYa7m\/1RU\/7a2\/42NWqLWanB1\/ykpLDI3fn9\/SHaYTIexlpib3Nzc7+npU5bFqdz\/P2WAvL29d8b\/hsz\/Zbfy+\/j4O0ZOOlFhldP\/T1lg\/\/\/\/a8H\/8uv2PAAAAAV0Uk5TGOCJ+voZW6nwAAAAw0lEQVQY002QjY7EIAiE1fWu7fbPenarWOH933KHXjfZSTDMFwKCMc76x0feW2eMk\/MPOs\/zOF4vEXHGHl8+A1njPz6mmhr14s3jrvdjjCOHBOTVQ2lBrC0q0gZ5TkSASxRFc6Pa9o1LWJGQB6LSdr41rSEB1Wnn3w6+65TNQD0x\/zyBnngCZW3fmMsGVAqiXhMrUu2GEbwvF+pb4Wmkcdg41HwhiToSJWUFAbKiP61tGFpd5Frb\/e8jOd+JHsz6L+GEb6ULGUOGoZJpAAAAAElFTkSuQmCC)](http:\/\/www.reddit.com\/submit?url=https%3A%2F%2Finfoheap.com%2Fjquery-check-if-element-is-visible-in-viewport%2F&title=jQuery+%E2%80%93+check+if+element+is+visible+in+viewport+ofter+scroll \"submit to reddit\")","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

3 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.1 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://infoheap.com/jquery-check-if-element-is-visible-in-viewport/
Last Crawled	2026-04-12 07:12:26 (3 days ago)
First Indexed	2021-11-26 06:57:01 (4 years ago)
HTTP Status Code	200
Meta Title	jQuery - check if element is visible in viewport ofter scroll - InfoHeap
Meta Description	How to make a div stick at top when a page is scrolled down by manipulating css position propery of div in jQuery - InfoHeap - Tech
Meta Canonical	null
Boilerpipe Text	Home > Tutorials > Javascript > jQuery To check if an element is visible in window viewport after vertical scrolling the following approach can be used using jQuery. Note that this approach assumes that there is no horizontal scrolling. Similar approach can be applied to check visibility in case there is horizontal scrolling. Window top can be obtained using $(window).scrollTop() and height can be obtained using $(window).height() . Similarly element top can be obtained using $(el).offset().top and its height can be obtained using $(el).height() . Example Here is the outcome screenshot and code to check if an element is visible in window viewport. <style>.largebox {height: 800px;}</style> <div id="msg" style="position:fixed;left:30%;"></div> <div id="box1" class="box">box1</div> <div class="largebox">box2</div> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> function isVisible($el) { var winTop = $(window).scrollTop(); var winBottom = winTop + $(window).height(); var elTop = $el.offset().top; var elBottom = elTop + $el.height(); return ((elBottom<= winBottom) && (elTop >= winTop)); } $(function() { $("#msg").text("#box1 visible=" + isVisible($("#box1"))); $(window).scroll(function() { $("#msg").text("#box1 visible=" + isVisible($("#box1"))); }); }); </script> Share this article:
Markdown	[![InfoHeap](https://infoheap.com/img/infoheap.png)](https://infoheap.com/tech/ "InfoHeap") Tech Navigation - [Home](https://infoheap.com/tech/) - [Tutorials](https://infoheap.com/tutorials/) - [CSS tutorials & examples](https://infoheap.com/topic/css/) - [CSS properties](https://infoheap.com/topic/css-property/) - [Javascript cookbook](https://infoheap.com/topic/javascript-cookbook/) - [Linux/Unix Command Line](https://infoheap.com/topic/command-line/) - [Mac](https://infoheap.com/topic/mac/) - [PHP](https://infoheap.com/topic/php/) - [PHP functions online](https://infoheap.com/topic/php-functions-online/) - [PHP regex](https://infoheap.com/topic/php-regex/) - [WordPress](https://infoheap.com/topic/wordpress/) - [Online Tools](https://infoheap.com/tool/) - [Text utilities](https://infoheap.com/topic/string-utilities/) - [Online Lint Tools](https://infoheap.com/topic/lint/) ![search](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAfdEVYdEF1dGhvcgBTZXJnaW8gTHVpeiBBcmF1am8gU2lsdmHhr4BUAAAASXRFWHRDb3B5cmlnaHQAUHVibGljIERvbWFpbiBodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9saWNlbnNlcy9wdWJsaWNkb21haW4vWcP+ygAABAxJREFUSImtll1sVGUQhp8527K7titspa01ykIp5YYfbcOdVTSCoCGEO7wzEQm0/MQsBIheSdJasyY2MdFWBCPckZgQk2KpUFEumraYthE1NAXbgoFtKGlooN3dM+PF2W632wIhOsnJ5JzJmZn3nZ/vEzMDQESktbW1srCw8OVEIuFTVeHJJHHu3Lm2WCw2CqQs7VjMjEuXLq0qKir6IhwOrw6Hw0VP6BgAM+PmzZu34/F4bzQafa+zs/O2maUApL+//wf7n+T+/fva1NR0HFgMiHPy5MmiUChUZWZM0/VfJBgMSmVl5WbgBcCXB0T8gcBCVQURxAwRj34RYWJigsGBAcbGxlhWXs6SSATHcR4ZZMGCBSFgCTCQd+/evTxTFVVDxDAEEUPN+P70ab47cYJkMpn5ORKJcPDIESpXrnxoAFX1AQuBfEdVxQzUFFXL6M9jMb5paSGZTBIIBFheUQHA0NAQ++vq6O/rexxbPkDyAMwUVUUQEOjp7qa9rQ0R4f1du9mw6U0Knirg7+vXOH7sGD1dXTTW1/PtqVPk5+c/MooDoGaZ7E2NC+3tAFRVV7Nl61aCgQBqSmTpUmr37kVEGI3H6e/rQ9VD7DXJQwKYGaYzFF2/dh2ADZs2z1CXtheXlLD2pSoABgcHve9pBiyjLSeAWhqF56SwsACA4aGhWXVRU9RV/rkxAkDA7/ey16wkcmBkEEwbVZWKFZUAtLf9iOu6s5x0d3URj8cREVatXjOnOXIReEXGM4gIBmzdto2LHRcYjcf5YE8dm956m+UrKuj46TwXf+4AoKS0lMXFxagagnkzJIaYPAzBDIqnFy1i9779+P1+RoaH+fqrLzkcjdJ2tpXJBw8AuH3rFp821JNIJNLNoWmK56mB6zKnmFXV1TTEPuOV9etZFC4iFAqxrLycd3fsYM3aFwHo6uzkk6NHmZycmkVVdhXSc+DxPA3R0rq0rIxde/bhbQ7J6Dc2biTW2Ejv5cv8drmHhqMfc+jDj/D7/R7NmttFmTad58ktoik+Xz4HDh2met06APp7e2k725ppFpgnwHyOLENZFr/poI7jsP/AQV597XWCwSDPlj03M3TZFE1NTU2mUq6raoC3SQXD0l2ByRzqEEMQHMdhZ20dO2trEcdheiOnUikDXMCcaDQ6eHfszo3p6mfPw5whmg+hKWbM2F2XgatXJ4BxIJkHTI6MDJ8JBIPLiktKAyKOl3n22ZCjMwhz+j+lKf768w+3paXlV2AYmBRAgGdqamre2b59+76CUKjYXPXNZhJv08685NgcRODKld/Hm5ubfxkfHz8DnAfuiHlZ5QFh4Hm8k2gh3j5/EnHTtAwDN4C7ZpaS7GsL3lz4gfy5eT5WDEgCU2RdW/4FM6YzETegIUgAAAAASUVORK5CYII=) ![](https://infoheap.com/wp-content/themes/shell-master/images/menu-icon.png) ## jQuery tutorials ### jQuery Ajax - [jQuery JSONP](https://infoheap.com/jquery-jsonp-cross-domain-ajax/) - [jQuery .post()](https://infoheap.com/jquery-post/) - [jQuery .load()](https://infoheap.com/jquery-ajax-load/) - [load script with cache enabled](https://infoheap.com/jquery-load-script-with-cache-enabled/) - [jQuery .ajax() file upload](https://infoheap.com/jquery-ajax-post-a-form-having-file-uploads/) ### jQuery CSS - [change table cells color based on value](https://infoheap.com/jquery-change-table-cells-color-based-on-values/) - [check if element is visible in viewport](https://infoheap.com/jquery-check-if-element-is-visible-in-viewport/) - [display auto fade out message](https://infoheap.com/jquery-display-auto-fade-out-message/) - [fitvids.js for automatically resizing videos](https://infoheap.com/fitvids-fluid-width-videos/) - [get class list of an element](https://infoheap.com/jquery-get-class-list/) - [jQuery toggleClass() examples](https://infoheap.com/jquery-toggleclass/) - [make a div stick at top on scroll](https://infoheap.com/jquery-make-a-div-stick-at-top-on-scroll/) - [table with alternate color rows](https://infoheap.com/html-table-with-alternate-color-rows/) ### jQuery Events - [Javascript/jQuery - disable right click](https://infoheap.com/javascript-jquery-disable-right-click/) - [jQuery - text input field - change keyup and paste events](https://infoheap.com/jquery-text-input-field-change-keyup-paste-events/) - [trigger click using jQuery or Javascript](https://infoheap.com/javascript-jquery-trigger-click/) ### jQuery DOM - [jQuery html() vs text()](https://infoheap.com/jquery-difference-between-html-and-text/) - [Check if an element exists](https://infoheap.com/jquery-check-if-an-element-exists/) - [find total DOM elements](https://infoheap.com/jquery-total-number-of-dom-elements/) - [jQuery encode string to html entities](https://infoheap.com/jquery-encode-string-html-entities/) - [jQuery - read and modify iframe content](https://infoheap.com/jquery-read-modify-iframe-content/) - [jQuery - create iframe with content](https://infoheap.com/jquery-create-iframe-with-content/) - [jQuery - find select element selectedIndex, value and text](https://infoheap.com/jquery-select-selected-index-value-and-text/) - [jQuery - get checkbox value and checked state](https://infoheap.com/jquery-checkbox-value-and-state/) - [jQuery - get javascript object](https://infoheap.com/jquery-get-javascript-object/) ### jQuery Cookbook - [get jQuery version](https://infoheap.com/jquery-get-version-info/) - [jQuery - add text to existing div](https://infoheap.com/jquery-add-text-existing-div/) - [jQuery sliding effect - slideUp, slideDown, slideToggle](https://infoheap.com/jquery-sliding-effect-slideup-slidedown-slidetoggle/) ### jQuery UI - [jQuery UI make element movable](https://infoheap.com/jquery-ui-make-element-draggable/) - [jQuery ui slider and input text box - one way binding](https://infoheap.com/jquery-ui-slider-input-text-box-one-way-binding/) - [jQuery ui slider and input text box - two way binding](https://infoheap.com/jquery-ui-slider-and-input-text-box-two-way-binding/) - [Home](https://infoheap.com/tech/ "Home") - \> [Tutorials](https://infoheap.com/tutorials/ "Tutorials") - \> [Javascript](https://infoheap.com/topic/javascript/ "Javascript") - \> [jQuery](https://infoheap.com/topic/jquery/ "jQuery") # [jQuery – check if element is visible in viewport ofter scroll](https://infoheap.com/jquery-check-if-element-is-visible-in-viewport/) on Apr 2, 2016 To check if an element is visible in window viewport after vertical scrolling the following approach can be used using jQuery. Note that this approach assumes that there is no horizontal scrolling. Similar approach can be applied to check visibility in case there is horizontal scrolling. 1. Window top can be obtained using `$(window).scrollTop()` and height can be obtained using `$(window).height()`. 2. Similarly element top can be obtained using `$(el).offset().top` and its height can be obtained using `$(el).height()`. ## Example Here is the outcome screenshot and code to check if an element is visible in window viewport. ![jquery-check-element-visible-in-viewport](https://infoheap.com/wp-content/uploads/2016/04/jquery-check-element-visible-in-viewport.png) ``` <style>.largebox {height: 800px;}</style> <div id="msg" style="position:fixed;left:30%;"></div> <div id="box1" class="box">box1</div> <div class="largebox">box2</div> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> function isVisible($el) { var winTop = $(window).scrollTop(); var winBottom = winTop + $(window).height(); var elTop = $el.offset().top; var elBottom = elTop + $el.height(); return ((elBottom<= winBottom) && (elTop >= winTop)); } $(function() { $("#msg").text("#box1 visible=" + isVisible($("#box1"))); $(window).scroll(function() { $("#msg").text("#box1 visible=" + isVisible($("#box1"))); }); }); </script> ``` [refresh]() done [try it online](https://infoheap.com/html-js-css-sandbox/code/12276-code1/) ### Suggested posts: 1. [CSS resize – make block element resizable by user](https://infoheap.com/css-resize-property/ "CSS resize – make block element resizable by user") 2. [egrep pipe example on Apache access log](https://infoheap.com/egrep-pipe-example-apache-access-log/ "egrep pipe example on Apache access log") 3. [CSS general sibling selector](https://infoheap.com/css-general-sibling-selector/ "CSS general sibling selector") 4. [Jquery – change table cells color based on value](https://infoheap.com/jquery-change-table-cells-color-based-on-values/ "Jquery – change table cells color based on value") 5. [Vim (vi) – multiline search replace with confirmation](https://infoheap.com/vi-multiline-search-replace-with-confirmation/ "Vim (vi) – multiline search replace with confirmation") 6. [CSS attribute substring selectors](https://infoheap.com/css-attribute-substring-selectors/ "CSS attribute substring selectors") 7. [CSS animation shorthand property](https://infoheap.com/css-animation-property/ "CSS animation shorthand property") 8. [CSS attribute presence and value selectors](https://infoheap.com/css-attribute-selectors/ "CSS attribute presence and value selectors") Share this article: [![share on facebook](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAABGdBTUEAALGPC/xhBQAAAHtQTFRFS2ehO1iYO1mYuMPaeo65kqPHj6HFkaLFqbbSqrfSW3SpYHirZHytTGehh5nAvsjdytLjdIm2majJydHjSmagm6rK5ury2uDsiZvBnq3MzdXlU22lUWykQ2CcUGujf5K8eI245Ojx2+DsbIOybYS0aoGyXner////O1mYVL1EzQAAAAN0Uk5T/pz+wt2ACQAAAIJJREFUGNOVkMsSgjAQBDcoDxVRUVEBAQ0y+f8vdAMValOc6MPOVB/msKQCY5muLYrmzrz3h8YEJMQJQGKMUDkb7Dx1Bc5Z6qkHcLE5q6YrgHs3CNVi5LVUT6GO+gPE+ubNfwHtza9W9c/B8xFHTVXvYBVyVESDY1OWWw4iJR82vvAPAnos27XirR8AAAAASUVORK5CYII=)](http://www.facebook.com/share.php?u=https%3A%2F%2Finfoheap.com%2Fjquery-check-if-element-is-visible-in-viewport%2F "share on facebook") [![share on linkedin](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAABGdBTUEAALGPC/xhBQAAANtQTFRFHoe0HYu0HYy2SaLDHoy1Z7LNLpS6cbfRW6zKX63LbrXPQZ7BttrnIo+3Mpe8ZrHN0OfwV6rIdbjS8Pf6T6bGXq3KKpK6utzoq9TjlcncI4+3X67L/v//R6HDOJq+uNvons3fudvo+/3+LpW7QJ7AMJW7/P7+IY622+3zzebvT6XFJpG4LZS6N5m+KpO5QJ7BL5W7RqHDN5m9Ho21RKDC3e70PZy/II62P53AKJK5II22H422KZK5MJa7J5G4stjmSKLDjsbaJJC3OZq+gL/WVqnIK5O6////HYy1MNFfvgAAAAN0Uk5TEYLlPkfhpwAAAKpJREFUGNOl0MUSAjEURNEkuLu7u/sYkDDz+v+/CKiCqhm23OXZdTPGxS6YNHtzx7jMThCcMe73haKpgj3dnLdrawdwJvaBSCbf6C9MS8M7wTQ7nD7UzMsJ35gVyxJV4IpVjWK5dPQQoEupQcoRnKP+IZvo4RC1OkMarzxUpy7RxEO5c/NAtHRTHGgT7d10Be5Et39IQCpl6EoNAEepxGs2x0/vw4QbXhc+AXHZSj9dq1VHAAAAAElFTkSuQmCC)](http://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Finfoheap.com%2Fjquery-check-if-element-is-visible-in-viewport%2F&title=jQuery+%E2%80%93+check+if+element+is+visible+in+viewport+ofter+scroll "share on linkedin") [![tweet this](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAABGdBTUEAALGPC/xhBQAAAQtQTFRFlvDwm+vtm+vutPDyse/yu/H0y/X2yfT2p+3wq+7xnOHrlObsJZPPKZXPJpTPQKnXQafWJ5XQetDkHo7NpO3wL5HLLI/Kt/Hzo+3vec/je9HkYLjaj+LrI5jTGpbUJpzVFYPIQKDRqu7xkN/qGoPHY8DefdLkRK/aT63WjOHqg9fnjeDqn+zvV7PYU7DXru/xRqjVa8njFpzaTrHZF5zZSrDZUrfcj+PrPq3bIZzXqu7wkOPrxfP1wPL0uPHzvPL0r+/xoOzvJZzWFYjLFYzOFZDRouzvWLTYVLvghdzpVrzgnOvupe3ws/Dypu3woezvFZnXFZTUnevuFZ3bFZjXFX3DFYTIFX/Fm+vuhwZ4lQAAAAN0Uk5TEYLlPkfhpwAAAMhJREFUGNNjYGBk8vbh8PMRkXDzdwyKYGJkYGCMYGZjt7G1F/fVt/Jx9I6IYGRgYgHy7XwdlPz8gyJAgInBm9XOl0tUTBnCBwEGfwdOP+nQUN0IhJCOW1CEe2ioBpIQiAAKKUoKSalpI4T0wiFARQsuZKAQBgGqcCFjZ2dhXkE+HgEZuJCpiws/mvFmrq6y3KhCnoGBgXJOTvLqCKEIyxAgCAgIMEQIWVuYBAOBkSdYiAligLmXh4eXJsTbjBFoABRgTMgCwCAEAClGWD0Fbk5KAAAAAElFTkSuQmCC)](https://twitter.com/intent/tweet?url=https%3A%2F%2Finfoheap.com%2Fjquery-check-if-element-is-visible-in-viewport%2F&text=jQuery+%E2%80%93+check+if+element+is+visible+in+viewport+ofter+scroll "tweet this") [![submit to reddit](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAABGdBTUEAALGPC/xhBQAAAGBQTFRFMlp3XajeUZPCbrXpYa7m/1RU/7a2/42NWqLWanB1/ykpLDI3fn9/SHaYTIexlpib3Nzc7+npU5bFqdz/P2WAvL29d8b/hsz/Zbfy+/j4O0ZOOlFhldP/T1lg////a8H/8uv2PAAAAAV0Uk5TGOCJ+voZW6nwAAAAw0lEQVQY002QjY7EIAiE1fWu7fbPenarWOH933KHXjfZSTDMFwKCMc76x0feW2eMk/MPOs/zOF4vEXHGHl8+A1njPz6mmhr14s3jrvdjjCOHBOTVQ2lBrC0q0gZ5TkSASxRFc6Pa9o1LWJGQB6LSdr41rSEB1Wnn3w6+65TNQD0x/zyBnngCZW3fmMsGVAqiXhMrUu2GEbwvF+pb4Wmkcdg41HwhiToSJWUFAbKiP61tGFpd5Frb/e8jOd+JHsz6L+GEb6ULGUOGoZJpAAAAAElFTkSuQmCC)](http://www.reddit.com/submit?url=https%3A%2F%2Finfoheap.com%2Fjquery-check-if-element-is-visible-in-viewport%2F&title=jQuery+%E2%80%93+check+if+element+is+visible+in+viewport+ofter+scroll "submit to reddit") Posted in [Tutorials](https://infoheap.com/category/tutorial/) \\| Tagged [CSS](https://infoheap.com/topic/css/), [jQuery](https://infoheap.com/topic/jquery/), [Tutorials](https://infoheap.com/topic/tutorials/) - [Browse content](https://infoheap.com/browse/) - [Article Topics](https://infoheap.com/cat-list/) - [Article archives](https://infoheap.com/archives/) - [Contact Us](https://infoheap.com/contact-us/) Popular Topics: [Android Development](https://infoheap.com/topic/android-development/ "Android Development") \\| [AngularJS](https://infoheap.com/topic/angularjs/ "AngularJS") \\| [Apache](https://infoheap.com/topic/apache/ "Apache") \\| [AWS and EC2](https://infoheap.com/topic/aws/ "AWS and EC2") \\| [Bash shell scripting](https://infoheap.com/topic/bash/ "Bash shell scripting") \\| [Chrome developer tools](https://infoheap.com/topic/chrome-developer-tools/ "Chrome developer tools") \\| [Company results](https://infoheap.com/topic/company-results/ "Company results") \\| [CSS](https://infoheap.com/topic/css/ "CSS") \\| [CSS cookbook](https://infoheap.com/topic/css-cookbook/ "CSS cookbook") \\| [CSS properties](https://infoheap.com/topic/css-property/ "CSS properties") \\| [CSS Pseudo Classes](https://infoheap.com/topic/css-pseudo-classes/ "CSS Pseudo Classes") \\| [CSS selectors](https://infoheap.com/topic/css-selector/ "CSS selectors") \\| [CSS3](https://infoheap.com/topic/css3/ "CSS3") \\| [CSS3 flexbox](https://infoheap.com/topic/css-flexbox/ "CSS3 flexbox") \\| [Devops](https://infoheap.com/topic/devops/ "Devops") \\| [Git](https://infoheap.com/topic/git/ "Git") \\| [HTML](https://infoheap.com/topic/html/ "HTML") \\| [HTML5](https://infoheap.com/topic/html5/ "HTML5") \\| [Java](https://infoheap.com/topic/java/ "Java") \\| [Javascript](https://infoheap.com/topic/javascript/ "Javascript") \\| [Javascript cookbook](https://infoheap.com/topic/javascript-cookbook/ "Javascript cookbook") \\| [Javascript DOM](https://infoheap.com/topic/javascript-dom/ "Javascript DOM") \\| [jQuery](https://infoheap.com/topic/jquery/ "jQuery") \\| [Kubernetes](https://infoheap.com/topic/kubernetes/ "Kubernetes") \\| [Linux](https://infoheap.com/topic/linux/ "Linux") \\| [Linux/Unix Command Line](https://infoheap.com/topic/command-line/ "Linux/Unix Command Line") \\| [Mac](https://infoheap.com/topic/mac/ "Mac") \\| [Mac Command Line](https://infoheap.com/topic/mac-command-line/ "Mac Command Line") \\| [Mysql](https://infoheap.com/topic/mysql/ "Mysql") \\| [Networking](https://infoheap.com/topic/networking/ "Networking") \\| [Node.js](https://infoheap.com/topic/node-js/ "Node.js") \\| [Online Tools](https://infoheap.com/topic/online-tools/ "Online Tools") \\| [PHP](https://infoheap.com/topic/php/ "PHP") \\| [PHP cookbook](https://infoheap.com/topic/php-cookbook/ "PHP cookbook") \\| [PHP Regex](https://infoheap.com/topic/php-regex/ "PHP Regex") \\| [Python](https://infoheap.com/topic/python/ "Python") \\| [Python array](https://infoheap.com/topic/python-array/ "Python array") \\| [Python cookbook](https://infoheap.com/topic/python-cookbook/ "Python cookbook") \\| [SEO](https://infoheap.com/topic/seo/ "SEO") \\| [Site Performance](https://infoheap.com/topic/site-performance/ "Site Performance") \\| [SSH](https://infoheap.com/topic/ssh/ "SSH") \\| [Ubuntu Linux](https://infoheap.com/topic/ubuntu/ "Ubuntu Linux") \\| [Web Development](https://infoheap.com/topic/web-development/ "Web Development") \\| [Webmaster](https://infoheap.com/topic/webmaster/ "Webmaster") \\| [Wordpress](https://infoheap.com/topic/wordpress/ "Wordpress") \\| [Wordpress customization](https://infoheap.com/topic/wordpress-customization/ "Wordpress customization") \\| [Wordpress How To](https://infoheap.com/topic/wordpress-how-to/ "Wordpress How To") \\| [Wordpress Mysql Queries](https://infoheap.com/topic/wordpress-mysql-query/ "Wordpress Mysql Queries") \\| [InfoHeap Money](https://infoheap.com/) \\| [InfoHeap Mutual Funds](https://infoheap.com/mutual-funds/) Copyright © 2026 [InfoHeap](https://infoheap.com/ "InfoHeap"). Powered by [WordPress](http://wordpress.org/ "State-of-the-art semantic personal publishing platform")
Readable Markdown	- [Home](https://infoheap.com/tech/ "Home") - \> [Tutorials](https://infoheap.com/tutorials/ "Tutorials") - \> [Javascript](https://infoheap.com/topic/javascript/ "Javascript") - \> [jQuery](https://infoheap.com/topic/jquery/ "jQuery") To check if an element is visible in window viewport after vertical scrolling the following approach can be used using jQuery. Note that this approach assumes that there is no horizontal scrolling. Similar approach can be applied to check visibility in case there is horizontal scrolling. 1. Window top can be obtained using `$(window).scrollTop()` and height can be obtained using `$(window).height()`. 2. Similarly element top can be obtained using `$(el).offset().top` and its height can be obtained using `$(el).height()`. ## Example Here is the outcome screenshot and code to check if an element is visible in window viewport. ![jquery-check-element-visible-in-viewport](https://infoheap.com/wp-content/uploads/2016/04/jquery-check-element-visible-in-viewport.png) ``` <style>.largebox {height: 800px;}</style> <div id="msg" style="position:fixed;left:30%;"></div> <div id="box1" class="box">box1</div> <div class="largebox">box2</div> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> function isVisible($el) { var winTop = $(window).scrollTop(); var winBottom = winTop + $(window).height(); var elTop = $el.offset().top; var elBottom = elTop + $el.height(); return ((elBottom<= winBottom) && (elTop >= winTop)); } $(function() { $("#msg").text("#box1 visible=" + isVisible($("#box1"))); $(window).scroll(function() { $("#msg").text("#box1 visible=" + isVisible($("#box1"))); }); }); </script> ``` Share this article: [![share on facebook](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAABGdBTUEAALGPC/xhBQAAAHtQTFRFS2ehO1iYO1mYuMPaeo65kqPHj6HFkaLFqbbSqrfSW3SpYHirZHytTGehh5nAvsjdytLjdIm2majJydHjSmagm6rK5ury2uDsiZvBnq3MzdXlU22lUWykQ2CcUGujf5K8eI245Ojx2+DsbIOybYS0aoGyXner////O1mYVL1EzQAAAAN0Uk5T/pz+wt2ACQAAAIJJREFUGNOVkMsSgjAQBDcoDxVRUVEBAQ0y+f8vdAMValOc6MPOVB/msKQCY5muLYrmzrz3h8YEJMQJQGKMUDkb7Dx1Bc5Z6qkHcLE5q6YrgHs3CNVi5LVUT6GO+gPE+ubNfwHtza9W9c/B8xFHTVXvYBVyVESDY1OWWw4iJR82vvAPAnos27XirR8AAAAASUVORK5CYII=)](http://www.facebook.com/share.php?u=https%3A%2F%2Finfoheap.com%2Fjquery-check-if-element-is-visible-in-viewport%2F "share on facebook") [![share on linkedin](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAABGdBTUEAALGPC/xhBQAAANtQTFRFHoe0HYu0HYy2SaLDHoy1Z7LNLpS6cbfRW6zKX63LbrXPQZ7BttrnIo+3Mpe8ZrHN0OfwV6rIdbjS8Pf6T6bGXq3KKpK6utzoq9TjlcncI4+3X67L/v//R6HDOJq+uNvons3fudvo+/3+LpW7QJ7AMJW7/P7+IY622+3zzebvT6XFJpG4LZS6N5m+KpO5QJ7BL5W7RqHDN5m9Ho21RKDC3e70PZy/II62P53AKJK5II22H422KZK5MJa7J5G4stjmSKLDjsbaJJC3OZq+gL/WVqnIK5O6////HYy1MNFfvgAAAAN0Uk5TEYLlPkfhpwAAAKpJREFUGNOl0MUSAjEURNEkuLu7u/sYkDDz+v+/CKiCqhm23OXZdTPGxS6YNHtzx7jMThCcMe73haKpgj3dnLdrawdwJvaBSCbf6C9MS8M7wTQ7nD7UzMsJ35gVyxJV4IpVjWK5dPQQoEupQcoRnKP+IZvo4RC1OkMarzxUpy7RxEO5c/NAtHRTHGgT7d10Be5Et39IQCpl6EoNAEepxGs2x0/vw4QbXhc+AXHZSj9dq1VHAAAAAElFTkSuQmCC)](http://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Finfoheap.com%2Fjquery-check-if-element-is-visible-in-viewport%2F&title=jQuery+%E2%80%93+check+if+element+is+visible+in+viewport+ofter+scroll "share on linkedin") [![tweet this](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAABGdBTUEAALGPC/xhBQAAAQtQTFRFlvDwm+vtm+vutPDyse/yu/H0y/X2yfT2p+3wq+7xnOHrlObsJZPPKZXPJpTPQKnXQafWJ5XQetDkHo7NpO3wL5HLLI/Kt/Hzo+3vec/je9HkYLjaj+LrI5jTGpbUJpzVFYPIQKDRqu7xkN/qGoPHY8DefdLkRK/aT63WjOHqg9fnjeDqn+zvV7PYU7DXru/xRqjVa8njFpzaTrHZF5zZSrDZUrfcj+PrPq3bIZzXqu7wkOPrxfP1wPL0uPHzvPL0r+/xoOzvJZzWFYjLFYzOFZDRouzvWLTYVLvghdzpVrzgnOvupe3ws/Dypu3woezvFZnXFZTUnevuFZ3bFZjXFX3DFYTIFX/Fm+vuhwZ4lQAAAAN0Uk5TEYLlPkfhpwAAAMhJREFUGNNjYGBk8vbh8PMRkXDzdwyKYGJkYGCMYGZjt7G1F/fVt/Jx9I6IYGRgYgHy7XwdlPz8gyJAgInBm9XOl0tUTBnCBwEGfwdOP+nQUN0IhJCOW1CEe2ioBpIQiAAKKUoKSalpI4T0wiFARQsuZKAQBgGqcCFjZ2dhXkE+HgEZuJCpiws/mvFmrq6y3KhCnoGBgXJOTvLqCKEIyxAgCAgIMEQIWVuYBAOBkSdYiAligLmXh4eXJsTbjBFoABRgTMgCwCAEAClGWD0Fbk5KAAAAAElFTkSuQmCC)](https://twitter.com/intent/tweet?url=https%3A%2F%2Finfoheap.com%2Fjquery-check-if-element-is-visible-in-viewport%2F&text=jQuery+%E2%80%93+check+if+element+is+visible+in+viewport+ofter+scroll "tweet this") [![submit to reddit](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAMAAABhEH5lAAAABGdBTUEAALGPC/xhBQAAAGBQTFRFMlp3XajeUZPCbrXpYa7m/1RU/7a2/42NWqLWanB1/ykpLDI3fn9/SHaYTIexlpib3Nzc7+npU5bFqdz/P2WAvL29d8b/hsz/Zbfy+/j4O0ZOOlFhldP/T1lg////a8H/8uv2PAAAAAV0Uk5TGOCJ+voZW6nwAAAAw0lEQVQY002QjY7EIAiE1fWu7fbPenarWOH933KHXjfZSTDMFwKCMc76x0feW2eMk/MPOs/zOF4vEXHGHl8+A1njPz6mmhr14s3jrvdjjCOHBOTVQ2lBrC0q0gZ5TkSASxRFc6Pa9o1LWJGQB6LSdr41rSEB1Wnn3w6+65TNQD0x/zyBnngCZW3fmMsGVAqiXhMrUu2GEbwvF+pb4Wmkcdg41HwhiToSJWUFAbKiP61tGFpd5Frb/e8jOd+JHsz6L+GEb6ULGUOGoZJpAAAAAElFTkSuQmCC)](http://www.reddit.com/submit?url=https%3A%2F%2Finfoheap.com%2Fjquery-check-if-element-is-visible-in-viewport%2F&title=jQuery+%E2%80%93+check+if+element+is+visible+in+viewport+ofter+scroll "submit to reddit")
Shard	175 (laksa)
Root Hash	12557530982376942175
Unparsed URL	com,infoheap!/jquery-check-if-element-is-visible-in-viewport/ s443