1

I'm working on this page. Main structure is some DIVs beneath each other. I need to do some transitions or animations when user scrolls from one to another. The height of the DIVs aren't the same. it is done only by min-height:100%. My JS doesn't work when I try to do any alert at the end of the DIV.

 <div id="page">
    <div class="section section_1"> ...content...</div>
    <div class="section section_2">...content...</div>
    <div class="section section_3">...content...</div>
    <div class="section section_4">...content...</div>
</div>

This is the JS file 

jQuery(
$('.section').on('scroll', function () {
    if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
        alert('end of div');
         }
     })

 );

Do you have any ideas why this doesn't work? Or can you suggest me any other solution how to make this kind of animation?

Adrian M.
  • 11
  • 1

2 Answers2

2

Code Example for Local

Question's already been answered here.

Edited

Bind your alert as such:

var shown = document.getElementById("page").children;

function callback () {
    alert('end of div');
} 

function isElementInViewport(el) {
    var eap,
        rect     = el.getBoundingClientRect(),
        docEl    = document.documentElement,
        vWidth   = window.innerWidth || docEl.clientWidth,
        vHeight  = window.innerHeight || docEl.clientHeight,
        efp      = function (x, y) { return document.elementFromPoint(x, y) },
        contains = "contains" in el ? "contains" : "compareDocumentPosition",
        has      = contains == "contains" ? 1 : 0x14;
    // Return false if it's not in the viewport
    if (rect.right < 0 || rect.bottom < 0 
            || rect.left > vWidth || rect.top > vHeight)
        return false;
    // Return true if any of its four corners are visible
    return (
          (eap = efp(rect.left,  rect.top)) == el || el[contains](eap) == has
      ||  (eap = efp(rect.right, rect.top)) == el || el[contains](eap) == has
      ||  (eap = efp(rect.right, rect.bottom)) == el || el[contains](eap) == has
      ||  (eap = efp(rect.left,  rect.bottom)) == el || el[contains](eap) == has
    );
}

function fireIfElementVisible (el, callback) {
    return function () {
        if ( isElementInViewport(el) ) {
            callback();
        }
    }
}

var handler = fireIfElementVisible (shown[shown.length - 1], callback);

$(document).on('DOMContentLoaded load resize scroll', handler);

Above function will return boolean on whether your element is currently viewable on screen.

Community
  • 1
  • 1
Xenyal
  • 2,136
  • 2
  • 24
  • 51
  • Am I doing something wrong here? http://jsfiddle.net/chfpha7s/14/ I used your code but it's not working. – Adrian M. Nov 17 '14 at 19:00
  • `$(window)` will not work on jsfiddle I believe. The result window is an iframe so you scrolling inside that is not acting in the same document object as where the script is. Trying the function locally would work. – Xenyal Nov 17 '14 at 19:08
  • @AdrianM. I put the sample file on my git link at the top. You can run that locally as an example. – Xenyal Nov 17 '14 at 19:51
  • I've tried it, it works but only when i get to the third DIV. even if I extended the height of DIV to see only one on my screen. – Adrian M. Nov 17 '14 at 20:56
  • The browser detects the edge of the last `div` on screen. – Xenyal Nov 17 '14 at 20:58
  • I understand but on screen is only the first div – Adrian M. Nov 17 '14 at 21:05
  • I just copy & pasted the file from my Git onto a local html file and it works fine. Can you clear your browser cache? – Xenyal Nov 17 '14 at 21:08
2

Try This:

jQuery(function($) {
    $('.section').bind('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) {
            alert('end reached');
        }
    })
});
Faisal Ahmed
  • 91
  • 1
  • 1
  • 5