Question

I’m making an endless page, ie. When a user scrolls to the end of the page, I load more content at the bottom (I’ll be loading blog posts to be precise), this is part is finished, However…..

My employer requested that I add a sliding feature to indicate and display part of the new posts that have just been added. My problem is that the old posts(on top) are disappearing under a Fixed-Header I have on top when I slide-up the ‘posts-container’.

Here’s a clearer picture(scroll result page to the bottom please): http://jsfiddle.net/jlstr/D4BqN/

So, in summary.. Could you guys please teach me how to make a Layout(for the posts) that displays all the posts, but prevents them from disappearing under the Fixed-Header?

Thanks in advance and Best Regards!

Answer 1

You should scroll down automatically instead of changing the margin: http://jsfiddle.net/D4BqN/2/.

function $slide() {
    $('body').animate({
        scrollTop: '+=100'
    }, 1000);
}

This is also more intuitive since you in fact want to scroll down to the new post. (You’re currently moving up the element which places it behind the fixed header.)