• Home
MAIS

    Sidebar flutuante entre 2 divs ou Sticky sidebar

    - Anúncio -
    - Anúncio -

    Este código é bem simples e você consegue colocar uma sidebar flutuante entre 2 divs ou como conhecida Sticky Sidebar.

     

    vou criar uma HTML de exemplo:

    <div id="header">header</div>
    
    <div id="sidebarWrap">
        <div id="sidebar">Sidebar</div>
    </div>
    
    <div id="main">
        Main
    </div>
    
    <div id="footer">
        footer
    </div>

     

    um CSS para teste:

    body {
        margin: 10px auto;
        font-family: sans-serif;
        width: 500px;
    }
    
    div {
        border-radius: 5px;
        box-shadow: 1px 2px 5px rgba(0,0,0,0.3);
        border: 1px solid #ccc;
        padding: 5px;
    }
    
    #sidebarWrap {
        height: 400px;
        width: 210px;
        float: right;
        position: relative;
        box-shadow: none;
        border: none;
        margin: 0;
        padding: 0;
    }
    
    #main {
        width: 270px;
        height: 4000px;
    }
    
    #footer {
        clear: both;
        margin: 10px 0;
    }
    
    #sidebar {
        width: 200px;
        height: 300px;
        position: absolute;
    }
    
    #header {
        height: 200px;
        margin-bottom: 10px;
    }
    
    #sidebar.fixed {
        position: fixed;
        top: 0;
    }
    
    
    #footer { height: 600px; }
    

    e agora vamos ao jQuery:

    $(function() {
        var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));
        var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0));
    
        var maxY = footTop - $('#sidebar').outerHeight();
    
        $(window).scroll(function(evt) {
            var y = $(this).scrollTop();
            if (y > top) {
                if (y < maxY) {
                    $('#sidebar').addClass('fixed').removeAttr('style');
                } else {
                    $('#sidebar').removeClass('fixed').css({
                        position: 'absolute',
                        top: (maxY - top) + 'px'
                    });
                }
            } else {
                $('#sidebar').removeClass('fixed');
            }
        });
    });

    essa é uma forma simples, existem outras formas também. Caso tenha alguma diferente poste nos comentários.

     

     

     

    - Anúncio -

    Artigos recentes

    Cielo ZIP

    Cabe no seu bolso e não precisa de celular. Você pode levar para aonde quiser e conta com bateria de longa duração.DébitoCrédito à vistaCrédito...

    Cielo Mini ZIP – Agilidade e facilidade para você vender aonde estiver

    A maquininha de cartão que não precisa de celular, é pequena no tamanho e no preço. Agilidade e facilidade para você vender aonde estiver.DébitoCrédito...

    Moderninha Smart

    Vantagens de vender com a Moderninha Smart Sem aluguel, nem taxa de adesão Faça a gestão completa do...

    Plugin API Cielo 3.0 para Woocommerce

    Integração do Woocommerce com a nova API 3.0 da Cielo. 

    Aproveite a Black Friday da Moderninha e Minizinha

    Aproveite a Black Friday para adquirir sua moderninha ou minizinha com um descontão. Maquininhas com até 50% de desconto. Veja abaixo a relação dos descontos: Minizinha Chip...

    Continue lendo

    1 COMENTÁRIO

    1. Estou a dias que estou pesquisando, de como adicionar esse recurso em meu site, porem não encontro ninguém que mostre realmente como implementar esse recurso – todos mostram superficialmente, não adianta- minha plataforma é o blogger. Encontro soluções para flutuar, porem ultrapassa o rodapé, isso não quero.

    DEIXE UMA RESPOSTA

    Please enter your comment!
    Please enter your name here

    Stay on op - Ge the daily news in your inbox