5

Queria adicionar um banner lateral, que consoante a scroll, o banner acompanhasse a página. A imagem mostra o que quero fazer: inserir a descrição da imagem aqui

Mas o banner nunca pode passar alguns limites, ou seja, não pode ir para cima do header nem do footer e tendo em atenção que o tamanho da página não é sempre o mesmo. Posso limitar isto com divs? Ou posso dar um limite, por exemplo, dar um espaçamento em cima e em baixo? E como meto o banner a mexer-se consoante a scroll?

Eu tenho feito o seguinte:

                <style>
                    @media screen and (max-width: 770px) {
                        #getFixed {
                            display: none;
                        }
                    }

                    #getFixed { padding: 100px 0px 0 0px; margin: 0px; z-index: 2; }
                </style>
                <script>
                    function fixDiv() {
                      var $cache = $('#getFixed'); 
                      if ($(window).scrollTop() > 350) 
                        $cache.css({'position': 'fixed', 'top': '10px'}); 
                      else
                        $cache.css({'position': 'relative', 'top': 'auto'});
                    }
                    $(window).scroll(fixDiv);
                    fixDiv();
                </script>
                <div id="getFixed" style="margin-top: 35px;">
                    <img src="<?php echo $banner;?>" width="220">
                </div>

O problema é que a imagem vai para cima do footer, posso lhe meter algum limite? O que me está acontecer é o seguinte (o banner fica por cima do footer): inserir a descrição da imagem aqui

5
  • @pc_pc se você criar mais uma condição limitando a área que ele não deve invadir não resolveria?
    – HeltonSS
    Commented 2/04/2014 às 12:21
  • @HeltonSS sim, mas como? consegue ajudar-me?
    – pc_oc
    Commented 2/04/2014 às 13:36
  • Aqui tem um exemplo prático que o Danilo disse devexpress.com/support/demos Banner live chat no canto direito. Commented 3/04/2014 às 13:10
  • @pc_oc o banner pode ficar abaixo(escondido) do header ou do footer?
    – R3oLoN
    Commented 4/04/2014 às 16:24
  • @R3oLoN a ideia não era ficar por baixo do footer, pois já estou a contornar isto com um z-index.
    – pc_oc
    Commented 4/04/2014 às 16:30

4 Respostas 4

1

Um jeito rápido e fácil de fazer isso seria posicionar uma div manualmente e definir o atributo position com o valor fixed:

<style type="text/css">
    #banner {
        position: fixed;
        width: 200px;
        display: inline-block;
        right: 30px;
        top: 150px;
        background: #C2DFFF;
        border: 1px solid #2898FF;
        padding: 8px;
    }
</style>

<div id="banner">
    <p>Conteúdo</p>
</div>
3
  • mas neste caso, a imagem vai para cima do footer, uma vez que o meu footer é alto, a imagem fica em cima dele.
    – pc_oc
    Commented 3/04/2014 às 13:56
  • É só você ajustar o atributo top pra algum valor seja ideal. Qual é o tamanho (altura) do seu footer? Commented 3/04/2014 às 17:52
  • o footer tem 500px
    – pc_oc
    Commented 4/04/2014 às 11:45
1
<!DOCTYPE html>
<html>
<head>
<style>
  #banner {
    position: fixed;        
    left: 10px;
    height: 300px;
    width: 110px;
    padding: 10px 5px;
    text-align: center;
    background-color: #fff;
    border: 5px solid #000;
  }
  #footer { height: 600px; background: #888; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
    function checarScroll() {
        var margem = 10;
        var posicao = $(document).scrollTop() + window.innerHeight;
        var footertop = $('#footer').offset().top;            
        var meiodapagina = window.innerHeight / 2;            
        var maximo = footertop + meiodapagina - margem;

        if (posicao < maximo) {
            $('#banner').css('bottom', meiodapagina + 'px');
        } else {                
            $('#banner').css('bottom', (margem + (posicao - footertop)) + 'px');
        }
    }
    $(document).ready(checarScroll);
    $(document).scroll(checarScroll);
</script>
</head>
<body>
<div style="height:1200px">
    Conteúdo da página                
</div>
<div id="banner">
    <div class="bannerconteudo">BANNER</div>        
</div>
<div id="footer">Aqui está o footer</div>
</body>
</html>
3
  • Este exemplo está muito perto daquilo que pretendo! Mas está a ficar em cima do header. Que alteração posso fazer para o banner aparecer a seguir ao header? É que neste momento ele aparece por cima do header. obrigado!
    – pc_oc
    Commented 4/04/2014 às 16:43
  • Teoricamente seria a mesma lógica do footer com alguns ajustes. Você chegou a testar o código desse link? outstando.com/limited-fixed-area-using-jquery Commented 4/04/2014 às 19:05
  • sim, tentei o que está nesse link mas depois tenho conflitos com outros js que tenho no site. Mas no código que meteu em cima, funciona bem! agora só tenho o problema com o header. Me consegue ajudar?
    – pc_oc
    Commented 4/04/2014 às 19:38
0

Pode ver aqui o exemplo dado pelo @Leandro

<script>
$(window).scroll(function(){
    if ( $(window).scrollTop() > sidebar_position.top 
      && $(window).scrollTop() < sidebar_scroll_bottom_limit.top - $(window).height())
    {
         $('#fixed-sidebar').stop().animate({top: $(window).scrollTop() - sidebar_top_padding}, 400);
    } else if ($(window).scrollTop() > sidebar_scroll_bottom_limit.top - $(window).height())  
    {
         $('#fixed-sidebar').stop().animate({top: sidebar_scroll_bottom_limit.top - $(window).height()}, 400);
    } else {
         $('#fixed-sidebar').stop().animate({top: '23' }, 400);         
    }

});
</script>
2
  • mas basta alterar o meu código javascript por este? É que mesmo assim não deu
    – pc_oc
    Commented 4/04/2014 às 16:32
  • não, tens de adaptar, as tuas variáveis.
    – Jorge B.
    Commented 4/04/2014 às 16:45
-2

Uma maneira é colocar a posição fixa e definir seu tamanho a partir da posição desejada.

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 .