Estou aqui no meu trabalho, e to com um problema aqui no site que estou mexendo.
Eu tenho uma div lateral que está com um código js para ficar ficar fixa na página (flutuando) assim que chega no top0 (segue o link abaixo)
$(function(){
var jElement = $('.element');
$(window).scroll(function(){
if ( $(this).scrollTop() > 835 ){
jElement.css({
'position':'fixed',
'top':'10px',
'width':'50%',
'margin-left':'50%',
// 'height':'1500px'
});
}else{
jElement.css({
'position':'relative',
'top':'auto',
'width':'50%',
'margin-left':'auto'
});
}
});
Enquanto a foto da esquerda continua rolando, a div da direita fica fixa na tela.
O problema é que, quando chega ao final da foto esquerda, a div continua rolando pra baixo, fazendo com que entre na frente do rodapé e estraga tudo.
Como eu faço para a div flutuante do lado direito parar assim que a foto da esquerda acabar?
Me ajudem, se não vou ser demitido (brincadeira) kk
z-index: -1
no.element
... assim quando chegar no rodapé, a div flutuante ficará por baixo do rodapé. Fazer ela "parar" e depois voltar é complicadíssimo.z-index
no rodapé de modo que fique por cima.