Sidebar Menu

Que coisa.... Tantas vezes que tenho que fazer isto e nunca sei.... Que tal guardar no blog??? hã, boa ideia.... Hora aqui segue a receita para todos aqueles que se encontrarem tipo eu... cansados de andar a procura! =)

Vou explicar isto atraves de um site para o qual eu espero ser o último por que tive que procurar esta info...

1º Já sabem que têm que pôr as divs, certo? Até aqui sem grandes sergredos

2º Acrescentem este jQuery 

Acrescentei o seguinte jquery mas, em vem do #my_sidebar, coloquem o id do vosso elemento HTML que querem que fique sossegadinho. Só têm de adaptar  as alturas para adaptarem a altura em que scroll começa a ter efeito. Onde está 500, coloquem a altura total do conjunto de elementos acima do vosso elemento estático.

$(window).scroll(function(){
      if ($(window).scrollTop() > 500 ){
            $("#sidebar_servicos").css({"top": ($(window).scrollTop()) -500 + "px"});
      }
});

Se quiserem que em determinado ponto o a div deixe de estar estática, coloquem este código em vez do anterior. A diferença é que assim estão a dizer que a div vá ficar estática de um ponto até a outro. Neste caso dei como final do efeito assim que o scroll da tela é igual ou superior à altura da div do lado direito...

$(window).scroll(function(){
      if ($(window).scrollTop() > 500 && $(window).scrollTop() < $('#serv_txt').height()){
            $("#my_sidebar").css({"top": ($(window).scrollTop()) -500 + "px"});
      }
});

 e pronto.... bonitinho =)

 

3º Scroll down quando clicamos no link

Se quisermos, além disto ou à parte, quando clicamos nos links do menu esquerdo, que a tela faça um scroll down automático para o link que o utilizador deve ler... segue a receita!

o que está a bold é o que devem adaptar ao vosso desenvolvimento, elemento e altura que querem do elemento (depois do scroll) até ao topo da tela

$(".links").on("click", function(e) {
       e.preventDefault();
       $("html, body").animate({
               scrollTop: $($(this).attr("href")).offset().top - 55
       }, 1000);
});

e voilá.... nunca mais me esqueço

Seguem em baixo os links onde fui buscar a receita... é muito importante... 

http://jsfiddle.net/BG7U8/
https://stackoverflow.com/questions/17390989/how-to-halt-a-div-after-scrolling-a-bit-using-jquery

::FUI::