1

Tenho este código que quando o scroll se movimenta ele fixa a sidebar no top, ate ai esta correto agora preciso que quando a sidebar se aproximar do footer, seja aplicado um um scroll bottom, ou algo do tipo para que ela acompanhe o footer.

    <script>
      jQuery(window).scroll(function () {
      var threshold = 20;
      if (jQuery(window).scrollTop() >= 20)
      jQuery('.sidebar').addClass('fixed');
    else
      jQuery('.sidebar').removeClass('fixed');
    });
    </script>
2
  • Para o menu e o footer chocarem é porque um deles, ou ambos, estão a usar espaço a mais... Porque fazer um scroll num deles e ter scroll na página vai ficar meio estranho para o utilizador.
    – Sergio
    30/07/2014 às 18:23
  • Sergio é o seguinte, tenho o menu no header normal quando o scroll é acionado ele fixa no topo, e essa sidebar fixa logo a baixo o menu, mas quando chega no final da pagina, o footer sobrepõe a sidebar,( o que eu quero que quando chegar ao footer a sidebar se solte do topo e suba juto com o conteúdo, Obrigado pela atenção. )
    – Uéder Wp
    30/07/2014 às 19:18

1 Resposta 1

1

Se quer fazer o sidebar seguir o limite do footer tem de saber mais alguns parametros/medidas para fazer algumas contas. Deixo um exemplo em baixo. Idealmente deve ter fora da função tudo o que é estático. Ou seja tudo o que tem medidas fixas:

var sidebar = jQuery('.sidebar');
var alturaFooter = jQuery('#footer').height();
var alturaPagina = jQuery('#pagina').height();
var alturaSidebar = sidebar.height();

Assim escusa de re-calcular isto a cada vez que o scroll é chamado.

Exemplo: http://jsfiddle.net/3ucuvvrm/

HTML

<div id="pagina">
    <header>Cabeçalho</header>
    <div class="sidebar">Sidebar</div>
    <footer>Footer</footer>
</div>

jQuery

var sidebar = jQuery('.sidebar');
var header = jQuery('header').height();
var alturaFooter = jQuery('footer').height();
var alturaPagina = jQuery('#pagina').height();
var alturaSidebar = sidebar.height();

jQuery(window).scroll(function () {

    // colar o sidebar
    var threshold = 20;
    var scroll = jQuery(window).scrollTop();
    if (scroll >= header) 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', 0);

});
1

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 .