Javascript Scroll event

Question

On some blogs, when you scroll towards the bottom of the page they will have a DIV that slides into view in the bottom right corner of the page.

A lot of times on a blog article, onces you get down the page to about the point where the Comment section starts is where they will have this DIV slide into view.

I am trying to replicate this, I saw one site that does it but it doesn't do it near the comments instead it uses this code below which you can see is around the half way point.

Document height - the Window height / 2

So it's actually left then half way down the page. How would I go about having it come into view when I get to the comment section of the page, let's say my comments are wrapped in a DIV with the ID comments

$(document).scroll(function () {
    var curPos = $(document).scrollTop();
    var docHeight = $(document).height() - $(window).height();
    if (curPos > (docHeight / 2)) {
      MoneyBox.show();
    } else {
      MoneyBox.hide();
    }
});

enter image description here

Jared · Accepted Answer · 2012-04-10 01:14:05Z

3

Try comparing the scrollTop and the offset of your div

$(document).scroll(function(){
    var curPos = $(document).scrollTop();

    var commentsPos = $('#comments').offset().top;

    if(curPos >= commentsPos) {
        MoneyBox.show();
    } else {
        MoneyBox.hide();
    }
});

answered Apr 10, 2012 at 1:14

Jared

12.5k1 gold badge37 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JasonDavis Over a year ago

I thought of that right after I posted but then I wasn't sure how to get the offset of the DIV so thanks! Ill accept this once it lets me

JasonDavis Over a year ago

Final result I took $('#comments').offset().top and subtract $(window).height() to form my commentsPos so that I can fire my action as soon as the #comment comes into view

Collectives™ on Stack Overflow

Javascript Scroll event

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related