2

I am trying to detect the current div that is currently div that is currently seen by the user and trigger an action: http://jsfiddle.net/w7X9N/2293/

I have tried this, but for some reason is not triggering the action. I tried also on scroll and still it did not detected the white background div

jQuery(
  function($) {
    $('#bla').bind('scroll', function() {
      if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
        alert('user viewing div');
      }
    })
  }
);
#flux {
  width: 200px;
  height: 150px;
  overflow: auto;
}
#bla {
  background: #FFF
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="flux">
  <div id="flux2">
    Lorem ipsum dolor sit amet
    <br>Consectetuer augue nibh lacus at
    <br>Pretium Donec felis dolor penatibus
    <br>Phasellus consequat Vivamus dui lacinia
    <br>Ornare nonummy laoreet lacus Donec
    <br>Ut ut libero Curabitur id
    <br>Dui pretium hendrerit sapien Pellentesque
    <br>

  </div>
  <div id="bla">
    THIS IS THE DIV THAT SHOULD TIGGER ACTION
    <br>Phasellus consequat Vivamus dui lacinia
    <br>Ornare nonummy laoreet lacus Donec
    <br>Ut ut libero Curabitur id
    <br>Dui pretium hendrerit sapien Pellentesque
    <br>Pretium Donec felis dolor penatibus
    <br>Phasellus consequat Vivamus dui lacinia
    <br>Ornare nonummy laoreet lacus Donec
    <br>Ut ut libero Curabitur id
    <br>Dui pretium hendrerit sapien Pellentesque
    <br>Pretium Donec felis dolor penatibus
    <br>Phasellus consequat Vivamus dui lacinia
    <br>Ornare nonummy laoreet lacus Donec
    <br>Ut ut libero Curabitur id
    <br>Dui pretium hendrerit sapien Pellentesque
    <br>
  </div>
  <div id="another-div">
    <br>123456
    <br>123456
    <br>123456
    <br>123456
    <br>123456
    <br>123456
  </div>

</div>
chirag
  • 1,599
  • 1
  • 14
  • 27
Adrian
  • 2,197
  • 3
  • 28
  • 66
  • 1
    Possible duplicate of [Jquery check if element is visible in viewport](http://stackoverflow.com/questions/20791374/jquery-check-if-element-is-visible-in-viewport) – N.J.Dawson Sep 05 '16 at 16:58
  • bind scroll event to window and then on scroll use scrollTop of window and offsetTop of your #bla div to detect if it's in view. – Sufian Saory Sep 05 '16 at 16:58
  • Do you want to trigger the alert once the white-background is visible (top of the element)? Or only when the user hit the end (bottom of the element)? – Dekel Sep 05 '16 at 17:04

2 Answers2

2

var viewed = 0;
$('div#flux').scroll(function() {    
    if ($(this).scrollTop() >= $('#bla').offset().top && viewed==0) {
      alert('user viewing div');
      viewed = 1;
    }
});
#flux {
  width: 200px;
  height: 150px;
  overflow: auto;
}
#bla {
  background: #FFF
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="flux">
  <div id="flux2">
    Lorem ipsum dolor sit amet
    <br> Consectetuer augue nibh lacus at
    <br> Pretium Donec felis dolor penatibus
    <br> Phasellus consequat Vivamus dui lacinia
    <br> Ornare nonummy laoreet lacus Donec
    <br> Ut ut libero Curabitur id
    <br> Dui pretium hendrerit sapien Pellentesque
    <br>

  </div>
  <div id="bla">
    THIS IS THE DIV THAT SHOULD TIGGER ACTION
    <br> Phasellus consequat Vivamus dui lacinia
    <br> Ornare nonummy laoreet lacus Donec
    <br> Ut ut libero Curabitur id
    <br> Dui pretium hendrerit sapien Pellentesque
    <br>Pretium Donec felis dolor penatibus
    <br> Phasellus consequat Vivamus dui lacinia
    <br> Ornare nonummy laoreet lacus Donec
    <br> Ut ut libero Curabitur id
    <br> Dui pretium hendrerit sapien Pellentesque
    <br>Pretium Donec felis dolor penatibus
    <br> Phasellus consequat Vivamus dui lacinia
    <br> Ornare nonummy laoreet lacus Donec
    <br> Ut ut libero Curabitur id
    <br> Dui pretium hendrerit sapien Pellentesque
    <br>
  </div>
  <div id="another-div">
    <br>123456
    <br>123456
    <br>123456
    <br>123456
    <br>123456
    <br>123456
  </div>

</div>
Rahul Patel
  • 5,118
  • 2
  • 11
  • 24
  • Why you have down voted? Please mention my mistake so I can correct it. – Rahul Patel Sep 05 '16 at 17:11
  • I have upvoted as it's working very well, well done with the viewed = 0, so it won't happen 2 times. One Questions, I want it to be triggered when the is seeing the div, right now it's kind of triggered after user saw the div. – Adrian Sep 05 '16 at 17:26
  • One question, I want it to be triggered when the is seeing the div, right now it's kind of triggered after user saw the div. – Adrian Sep 05 '16 at 17:39
  • 1
    Currently it triggered when user will scroll up to div#bla Current if condition match div's distance from top and user scrolled from top.. When both will match the alert will be triggered... – Rahul Patel Sep 05 '16 at 17:48
0

You are checking "on scroll" wrong element. Just rewrite $('#bla').bind('scroll'... to $('#flux').bind('scroll'...