Make elements fixed when their bottom edge scrolls into view

This one might seem complicated, I’ll do my best to explain!

I’m trying to make a continuous scrolling article display along the same lines of Bloomberg Politics (http://www.bloomberg.com/politics/articles/2015-07-02/fact-checking-rick-perry-s-economic-speech), but in a slightly different format.

Instead of the next article being static until the last has scrolled away, I would like the current articles bottom edge to become sticky/fixed to the bottom of the viewport and the new article to scroll in over the top of it.

I have attempted a jsfiddle to try and illustrate where I’ve got to and what I mean…..

<div class="wrapper">
    <article class="article article--one">
        Text text text text text text text text text
    </article>
    <article class="article article--two">
        Text text text text text text text text text
    </article>
</div>
.wrapper {
    padding: 8px;
    position: relative;
}

.article {
    width: calc(100% - 48px);
    min-height: 1200px;
    background: #ddd;
    padding: 24px;
}

.article--two {
    background: #f5f5f5;
}

.scroll {
    position: relative !important;
    top: auto !important;
    margin-top: 1248px !important;
    float: left !important;
    left: 0 !important;
    right: 0 !important;
}
$(window).scroll( function() {    
    $('.article').each( function(i) {    
        var bottom_of_object = $(this).position().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();
        var height = $(this).outerHeight();
        var secondheight = $('.article--two').outerHeight();
        var down = bottom_of_object;

        if (bottom_of_window > bottom_of_object) {     
            $(this).css({
                'position': 'fixed',
                'bottom': '0',
                'left': '16px',
                'right': '16px'
            });
            $('.article--two').addClass('scroll');    
        }    
    });     
});

JsFiddle

Any help would be gratefully appreciated! Ask away of this seems a little complicated!

Cheer!


Source: css

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.