Não achei muitos exemplos prontos de como se possa fazer isso, então resolvi fazer eu mesmo. Veja se é o que deseja:
Crei uma div
com a class="sideBar"
que pode possuir ter vários artigos, os "relacionados", ou qualquer outra coisa. Representei isso por várias div.artigos
.
Ficou assim:
<div class="sideBar" >
<div class="artigos"></div>
<div class="artigos"></div>
<div class="artigos"></div>
<div class="artigos"></div>
<div class="artigos"></div>
</div>
<div class="conteudo" >
</div>
Seus respectivos estilos:
.sideBar{
width: 180px;
height: auto;
float: right;
}
.conteudo{
width: auto;
height: 2000px;
background: #333;
margin-right: 200px;
}
.sideBar .artigos{
width: 100%;
height: 200px;
background: #f30;
margin-bottom: 5px;
}
Já o código fiz em JQuery:
$(document).scroll(function(){
var left = $('.sideBar').offset().left;
if($(this).scrollTop() >= $('.sideBar').height() - $('.artigos:last').height()){
$('.sideBar').css({
position: 'fixed',
top: -($('.sideBar').height() - $('.artigos:last').height()),
left: left
})
}else{
$('.sideBar').css({
position: 'relative',
top: 0,
left: '0'
})
}
})
Usei o evento .scroll()
do JQuery. Ao rolar a página a primeira coisa que será feita, será a captura do left
da .sideBar
. Após isso ele irá
verificar se o .scrollTop
do documento é maior que o tamanho da .sideBar
subtraído com o tamanho do último .artigos
, e caso seja a div.sideBar
receberá um position: fixed
, como este se comporta levando em consideração toda a página, terá um left
correspondente a captura anterior. Já o top
será igual ao tamanho da .sideBar
subtraído com o tamanho do último .artigos
, porém negativo (mesmo cálculo da verificação do scroll
).
Mas caso o scroll
será inferior ao resultado do cálculo, a div.sideBar
esta receberá um position: relative
, e um reset nos left
e top
.
Código Completo
Note que quando a a div.conteudo
acaba a div.sideBar
fica fixa, mas caso volte acima, ela volta a correr junto com o restante.
$(document).scroll(function(){
var left = $('.sideBar').offset().left;
if($(this).scrollTop() >= $('.sideBar').height() - $('.artigos:last').height()){
$('.sideBar').css({
position: 'fixed',
top: -($('.sideBar').height() - $('.artigos:last').height()),
left: left
})
}else{
$('.sideBar').css({
position: 'relative',
top: 0,
left: '0'
})
}
})
.sideBar{
width: 180px;
height: auto;
float: right;
}
.conteudo{
height: 2000px;
background: #333;
margin-right: 200px;
}
.sideBar .artigos{
width: 100%;
height: 200px;
background: #f30;
margin:0 0 5px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sideBar" >
<div class="artigos"></div>
<div class="artigos"></div>
<div class="artigos"></div>
<div class="artigos"></div>
<div class="artigos"></div>
</div>
<div class="conteudo" >
</div>
Caso tenha dificuldades para implementar em seu código, avise-me.