user3467855 user3467855 - 3 months ago 13
HTML Question

Detect if the second div is currently seen

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

HTML

<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>


Javascript

jQuery(
function($) {
$('#bla').bind('scroll', function() {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
alert('user viewing div');
}
})
}
);


CSS

#flux {
width: 200px;
height: 150px;
overflow: auto;
}
#bla {
background: #FFF
}

Answer

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>