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 (, 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 class="article article--two">
        Text text text text text text text text text
.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) {     
                'position': 'fixed',
                'bottom': '0',
                'left': '16px',
                'right': '16px'


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


Source: css

Leave a Reply

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