Dynamic Scroll Position in Jquery

Question

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>

Can you show us the code you've tried? – Richard Aug 21 '13 at 12:21 — Richard, Aug 21 '13 at 12:21

score 4 · Accepted Answer · answered Aug 21 '13 at 13:03

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%'
});

answered Aug 21 '13 at 13:03

Vikas Ghodke

6,602
5
27
38

1

Hi Thanks for your reply. As per the requirement i should not use any plugins. Do u have any other idea – michaelvino Aug 21 '13 at 14:13

Dynamic Scroll Position in Jquery

1 Answers1

Linked