2

Gostaria de saber como faço para deixar uma div fixa no lado lateral ao rolar a página para baixo.

O que eu quero fazer é exatamente como a newsletter lateral dessa página.. . Ao rolar para baixo você irá entender melhor o que eu estou falando.

Eu estou usando o wordpress e ja tentei usar alguns códigos e , mas não sem muito sucesso.

2
  • Exatamente essa página usa um plugin: bigspotteddog.github.io/ScrollToFixed - mas isso não é dificil de fazer. Se colocar seu código vai ter uma resposta + personalizada.
    – Sergio
    Commented 6/04/2014 às 19:47
  • Legal Sérgio.. irei testar. Obrigado!
    – Maicon
    Commented 7/04/2014 às 7:50

3 Respostas 3

4

Acho que isso resolve

<body style="height:2000px">
<style type="text/css">
.newsletter{position:fixed; bottom:15%; left:10%; width:220px; height:300px; background:#000;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 300) {
                $('.newsletter').fadeIn();
            } else {
                $('.newsletter').fadeOut();
            }
        });
    });
</script>
<div class="newsletter"></div>
</body>

Você só tem que dizer a altura desejada, neste caso 300px.

4
  • Não tinha visto os comentários, mas é fácil, no lugar do bottom poe top 0
    – Dexxtz
    Commented 6/04/2014 às 20:43
  • Olá Dexxt.. Valeu pela sua resposta cara deu certo! Mas tem um probleminha.. Quando recarrego a pagina o box da div aparece la em cima. Como eu faço para ele não aparecer quando recarregar a pagina? Obrigado.
    – Maicon
    Commented 7/04/2014 às 8:12
  • tenta isso aqui vê se te ajuda $(window).load(function(){ $('.newsletter').css('display','none'); }); quando a pagina for carregada ele some, mas isso é para quando pagina for totalmente carregada, tente achar um de só a pagina carregada tente isso aqui tbm: $(document).ready(function(){ $('.newsletter').css('display','none'); });
    – Dexxtz
    Commented 7/04/2014 às 13:36
  • Postei a solução que encontrei Dexxtz. Obrigadão pela força ;] abraços!
    – Maicon
    Commented 7/04/2014 às 18:47
2

Olá, é possível fazer capturando o evento scroll e verificar se o scrollTop é maior que o tamanho que você deseja.
Eu utilizaria o seguinte código

$(function(){

    var jElement = $('.element');

    $(window).scroll(function(){
        if ( $(this).scrollTop() > 300 ){
            jElement.css({
                'position':'fixed',
                'top':'300px'
            });
        }else{
            jElement.css({
                'position':'relative',
                'top':'auto'
            });
        }
    });

});

Onde salvamos a variável do nosso elemento com o jElement, verificamos quando o usuário der um scroll na página com $(window).scroll(); e verificamos se o scroll é maior que 300 (você pode mudar para qualquer valor que quiser) com $(this).scrollTop(); veja um exemplo em funcionamento aqui:
http://jsfiddle.net/Wagner/cwzVQ/embedded/result/

1
  • Me ajudou bastante em incrementar meu codigo Wagner.. Obrigadão.. abraços!
    – Maicon
    Commented 7/04/2014 às 18:46
-1

A solução que serviu para mim foi uma mistura da resposta do Dexxtz com a do Wagner. Então ficou com essa função do scroll com fadin e fadeout.

Pois primeiramente eu havia implementado o códido do dexxtz, mas ao carregar a página o box da div aparecia primeiramente no topo. Então eu fiz uma alteração baseado no que o Wagner postou.

Você pode ver o código comentado e simular aqui mesmo ou no jsfiddle:

   $(function () {
       //incluso essa variavel para setar atributos do css depois
       var elemento = $('.element');

       $(window).scroll(function () {
           //distancia que o scroll devera rolar para aparecer o box da div
           if ($(this).scrollTop() > 300) {
               //bloco incluso para setar o css
               elemento.css({
                   'position': 'fixed',
                       'bottom': '15%'
               });

               $('.element').fadeIn();
           } else {
               $('.element').fadeOut();
           }
       });
   });
body {
    height: 5000px;
    font: 13px verdana, sans-serif;
}
div {
    margin: 10px;
}
.other {
    width: 200px;
    padding: 3em;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-top: #4898c6 3px solid;
    text-align: center;
}
.element {
    width: 200px;
    padding: 3em;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-top: #dc0000 3px solid;
    text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="other">Outros conteúdos</div>
<div class="other">Outros conteúdos</div>
<div class="other">Outros conteúdos</div>
<div class="other">Outros conteúdos</div>
<div class="other">Outros conteúdos</div>
<div class="other">Outros conteúdos</div>
<div class="element">Conteúdo</div>

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 .