-1

Please help me for below scenario

i have 3 pages in place and user scrolls the page when scroll reach the second page, it has to find the specific ID and then trigger a function. once the third page starts another function triggers. As per the requirement i should not use any plugins

<script>
    $(window).on("scroll", function() {
        var offset = $("#two").offset();
        var posY = offset.top - $(window).scrollTop();
        if (offset.top + $("#two").height() > $(window).scrollTop()) {
            apply();
        } else {
            remove();
        }
</script>
<body>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
</body>
michaelvino
  • 56
  • 1
  • 7

1 Answers1

4

There is a great plugin to do this called WAYPOINT

I have setup an example on jsfiddle check it out

HTML

<div class="first"></div>
<div class="second"></div>

CSS

.first {
    background:green;
    height: 600px;
    width:100%;
}
.second {
    background:red;
    height: 600px;
    width:100%;
}

JS

$('.second').waypoint(function() {
    alert('You have scrolled to an entry.');
}, {
    offset: '100%'
});
Vikas Ghodke
  • 6,602
  • 5
  • 27
  • 38