jQuery Check When An Element Is In The Viewport Plugin

Get Current Section With Jquery is a simple jQuery script that determines if an element is in a viewport, and can be used to detect when an element is being passed to the view and tell the user which part of the page they are viewing.

How to make use of it:

1. Add a section box category to the elements whose scroll position should be tracked.

<section class="sectionbox" style="background-color: #ddd;">
  <span>0</span>
</section>
<section class="sectionbox">
  <span></span>
</section>
<section class="sectionbox">
  <span></span>
</section>
<section class="sectionbox">
  <span></span>
</section>
<section class="sectionbox">
  <span></span>
</section>

2. Load the required jQuery library into the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

3. The main function detects and sees items and does some cool stuff when they are scrolled for viewing.

(function ($) {
  $(window).on("scroll", function () {
    //Loop Sections
    $(".sectionbox").each(function (i, d) {
      // Get Current Section
      var sec = $(this);
      var el = $(this).find('span');
      if (
        $(this).position().top - 100  <= $(document).scrollTop() &&
        $(this).position().top - 100  + $(this).outerHeight() > $(document).scrollTop()
      ) {
        // when in the viewport
          el.html('<p>'+i+'</p>');
          sec.css({backgroundColor: '#ddd'});
      }else{
        // when out of the viewport
        sec.css({backgroundColor: '#fff'});
      }
    });
  });
})(jQuery);

Detect When An Element Is In The Viewport Using jQuery, Get Current Section With Jquery Github, check if element is visible in viewport jquery


See Demo And Download

Official Website(naeemprasla): Click Here

This superior jQuery/javascript plugin is developed by naeemprasla. For extra Advanced Usage, please go to the official website.

Share