Quero aplicar opacity
no rodapé de meu site, o rodapé esta fixo no bottom
e atras do resto do site tipo efeito parallax. Mas não consigo fazer com que fique gradativamente a opacidade, assim que rolar o scroll o opacity
que estava em zero fique 1 assim que a barra de rolagem chegar no meu rodapé.
Essa é a div do rodapé:
<div id="rodape" class="rodape"></div>
Esse é o css:
#rodape {
position: fixed;
bottom: 0;
z-index: -1;
}
.rodape {
width: 100%;
height: auto;
background-color: #00e676;
}
Dentro da div
vou colocar outros elementos como endereço, mapa do Google, etc. Como a div
esta por trás do resto do site e fixo no bottom
, começar a aparecer quero que a opacidade seja 0 e com o scroll vai aumentando até 1 quando acabar o scroll, pois será o fim do site.
Estou usando as informações desse codepen e esse js:
var scroll = $('#rodape');
var range = 200;
$(window).on('scroll', function () {
var scrollTop = $(this).scrollTop(),
height = heade.outerHeight(),
offset = height / 2,
calc = 1 - (scrollTop - offset + range) / range;
scroll.css({ 'opacity': calc });
if (calc > '1') {
scroll.css({ 'opacity': 1 });
} else if ( calc < '0' ) {
scroll.css({ 'opacity': 0 });
}
});
Já perceberam que não manjo muito de javascript né, mas quero deixar com esse efeito, alguém sabe onde estou errando? Existe alguma forma de fazer isso funcionar, ou alguma outra solução?