This task may appear intricate, but I will do my best to explain it!
I want to create a continuous scrolling article display similar to Bloomberg Politics (), but with a slight twist.
My idea is to have the current article's bottom edge stick to the bottom of the viewport and let the next article scroll in over the top, instead of having static articles until they are scrolled away.
I've made an attempt on jsfiddle to showcase what I mean and where I currently stand...
<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');
}
});
});
If you find this confusing, feel free to ask any questions!
Cheers!