InfoHeap
Tech
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

jQuery tutorials

    jQuery Ajax

    • jQuery JSONP
    • jQuery .post()
    • jQuery .load()
    • load script with cache enabled
    • jQuery .ajax() file upload

    jQuery CSS

    • change table cells color based on value
    • check if element is visible in viewport
    • display auto fade out message
    • fitvids.js for automatically resizing videos
    • get class list of an element
    • jQuery toggleClass() examples
    • make a div stick at top on scroll
    • table with alternate color rows

    jQuery Events

    • Javascript/jQuery - disable right click
    • jQuery - text input field - change keyup and paste events
    • trigger click using jQuery or Javascript

    jQuery DOM

    • jQuery html() vs text()
    • Check if an element exists
    • find total DOM elements
    • jQuery encode string to html entities
    • jQuery - read and modify iframe content
    • jQuery - create iframe with content
    • jQuery - find select element selectedIndex, value and text
    • jQuery - get checkbox value and checked state
    • jQuery - get javascript object

    jQuery Cookbook

    • get jQuery version
    • jQuery - add text to existing div
    • jQuery sliding effect - slideUp, slideDown, slideToggle

    jQuery UI

    • jQuery UI make element movable
    • jQuery ui slider and input text box - one way binding
    • jQuery ui slider and input text box - two way binding
     
    • Home
    • > Tutorials
    • > Javascript
    • > jQuery

    jQuery – check if element is visible in viewport ofter scroll

    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

    <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

    Suggested posts:

    1. CSS resize – make block element resizable by user
    2. egrep pipe example on Apache access log
    3. CSS general sibling selector
    4. Jquery – change table cells color based on value
    5. Vim (vi) – multiline search replace with confirmation
    6. CSS attribute substring selectors
    7. CSS animation shorthand property
    8. CSS attribute presence and value selectors
    Share this article: share on facebook share on linkedin tweet this submit to reddit
    Posted in Tutorials | Tagged CSS, jQuery, Tutorials
    • Browse content
    • Article Topics
    • Article archives
    • Contact Us
    Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | Company results | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries | InfoHeap Money

    Copyright © 2025 InfoHeap.

    Powered by WordPress