CODEWITHSUNDEEP
jquery
qqruza
qqruza

Reputation: 1417

Identify which div is scrolled to the top

I am trying to get a data attribute of each div with class .section which has reached/scrolled to the top. But somehow the only first div is getting identified even other ones are scrolled to the top.

Please see the example below.

var distance = $('.section').offset().top;

$(window).scroll(function() {
    if ( $(this).scrollTop() >= distance ) {
        console.log($('.section').data("action"));
    }
});
.section {height:600px;border-top:solid 1px black}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section" data-action="one"> </div>
<div class="section" data-action="two"> </div>
<div class="section" data-action="three"> </div>
<div class="section" data-action="four"> </div>
<div class="section" data-action="five"> </div>

Upvotes: 1

Views: 52

Answers (2)

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27051

Is this what you want? or maybe it can guide you to make it:

$(window).scroll(function() {
  $('.section').each(function() {
    var action = $(this).attr('data-action');
    if ($(this).isInViewport()) {
      console.log(action)
    }
  });
});

$.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;
};

Ref to code

Demo

var distance = $('.section').offset().top;

$(window).scroll(function() {
  $('.section').each(function() {
    var action = $(this).attr('data-action');

    if ($(this).isInViewport()) {
      if ($(this).attr("data-view") == "false") {
        console.log(action);
        $(this).attr("data-view", true)
      }
    } else {
      $(this).attr("data-view", false);
    }
  });
});

$.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;
};
.section {
  height: 600px;
  border-top: solid 1px black
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section" data-action="one"> </div>
<div class="section" data-action="two"> </div>
<div class="section" data-action="three"> </div>
<div class="section" data-action="four"> </div>
<div class="section" data-action="five"> </div>

Upvotes: 1

Abdul Rahim Shaikh
Abdul Rahim Shaikh

Reputation: 47

var distance = $('.section').offset().top;

$(window).scroll(function() {
    if ( $(this).scrollTop() >= distance ) {
        console.log($('.section')); // This returns an array of multiple divs. You need to iterate through it for getting the desired output.
        console.log($('.section').data("action"));
    }
});
.section {height:600px;border-top:solid 1px black}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section" data-action="one"> </div>
<div class="section" data-action="two"> </div>
<div class="section" data-action="three"> </div>
<div class="section" data-action="four"> </div>
<div class="section" data-action="five"> </div>

Upvotes: 0

Related Questions