- 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 -
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.