CODEWITHSUNDEEP
javascriptjqueryscroll
JasonDavis
JasonDavis

Reputation: 48983

Javascript Scroll event

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

Upvotes: 0

Views: 2140

Answers (1)

Jared
Jared

Reputation: 12524

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();
    }
});

Upvotes: 3

Related Questions