7

é o seguinte.. eu tenho um banner flutuante em meu blog que uso o seguinte JS

$(function(){

	var jElement = $('.element');

	$(window).scroll(function(){
		if ( $(this).scrollTop() > 2000 ){
			jElement.css({
				'position':'fixed',
				'top':'30px',
				'width':'360px'
			});
		}else{
			jElement.css({
				'position':'relative',
				'top':'30px'
			});
		}
	});
.element {
	width: 100%;
	margin-top: 30px;
	padding: 10px;
	background: #f9f9f9;
	text-align: center;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="element hidden-xs">
	conteudo

</div>

só que esse meu banner flutuante scroll está passando do rodape .. meu rodape começa com tags

Gostaria de uma ajuda para modificar esse JS para ele não fica por cima do rodapé! Meu blog é: http://www.aisenhor.com.br

4
  • Dá uma olhada a esta resposta e ao jsFiddle nela: pt.stackoverflow.com/a/27180/129
    – Sergio
    Commented 27/02/2015 às 23:21
  • @Sergio Sei, mais queria utilizar esse meu codigo, queria so fazer alguma coisa para ele não chegar no footer! Commented 27/02/2015 às 23:57
  • Então isso está lá, na ultima linha... if (scroll + alturaSidebar > alturaPagina - alturaFooter) sidebar.css('top', alturaPagina - scroll - alturaSidebar - alturaFooter);
    – Sergio
    Commented 27/02/2015 às 23:58
  • @Sergio certo! Obrigado pela dica, mais sou leigo em JS, estou tentando mais não sei como adpta-lo nesse meu código! Commented 28/02/2015 às 0:06

1 Resposta 1

1

Podes fazer assim:

// seguir o footer
if (scroll + alturaSidebar > alturaPagina - alturaFooter) sidebar.css('top', alturaPagina - scroll - alturaSidebar - alturaFooter);
else sidebar.css('top', 30);

No seu código pode ficar assim:

var sidebar = jQuery('.element');
var alturaFooter = jQuery('.rodape').height();
var alturaPagina = jQuery(document.body).height();
var alturaSidebar = sidebar.height();

jQuery(window).scroll(function () {

    // colar o sidebar
    var threshold = 2000;
    var scroll = jQuery(window).scrollTop();
    if (scroll >= 20) sidebar.addClass('fixed');
    else sidebar.removeClass('fixed');

    // seguir o footer
    if (scroll + alturaSidebar > alturaPagina - alturaFooter) sidebar.css('top', alturaPagina - scroll - alturaSidebar - alturaFooter);
    else sidebar.css('top', 30);

});

Esta sugestão é usando uma classe de CSS. Se quiseres fazer como tens, forçando no estilo do elemento podes trocar .addClass('fixed'); por

.css({ 'position':'fixed'});

e .removeClass('fixed'); por

.css({ 'position':'relative'});
4
  • fiz como está no codigo e não está funcionando! Veja: www.aisenhor.com.br.. o banner é o que tem uns caras e uma mulher musculação! Commented 28/02/2015 às 0:24
  • @LucianoOliveiraLima o teu código está na mesma, ainda não mudaste... -> aisenhor.com.br/wp-content/themes/aisenhor/js/… (não vejo aqui o meu código)
    – Sergio
    Commented 28/02/2015 às 0:30
  • seu codigo está no seguinte arquivo aisenhor.com.br/wp-content/themes/aisenhor/js/… não sei porque, mais não consigo ver o codigo javascript desse script, de todos vejo, menos desse pelo o Browser! @Sergio Commented 28/02/2015 às 0:34
  • @LucianoOliveiraLima a página dá erro que não encontra esse ficheiro. De qq maneira tens de tirar o outro. Muda o código lá...
    – Sergio
    Commented 28/02/2015 às 0:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .