DIV fixa até chegar próximo ao rodapé da página

[Robert Pardim 0]

Olá pessoal do Fórum, estou com uma dúvida que acredito ser simples, porém meu conhecimento em JS é muito precário... Preciso fazer uma DIV ficar inicialmente fixa e quando chegar próximo do rodapé da pagina, ela deixe de ser fixa e passe a ser relativa.

 

O primeiro passo de deixar ela fixa eu consegui, utilizando o plugin ScrollToFixed do Jquery. Só que dessa forma, ao chegar próximo do fim da página ela se sobrepõe ao rodapé. Por isso, a necessidade dela deixar de ser fixa.

 

 

Nesse link do site da OLX tem isso, e é exatamente o que preciso, reparem na DIV onde exibe o preço e os contatos do vendedor.

 

http://itapetininga.olx.com.br/sony-xperia-mini-pro-sk17i-c-android-4-04-rooteado-iid-669363703

 

 

Alguém tem alguma ideia de como se fazer isso?

[LeoO_DF 22]

http://www.criarsites.me/menu-scroll-fixo-com-jquery/

 

Não é exatamente o que você quer mas segue a lógica.

[Robert Pardim 0]

Eu já tinha dado uma olhada e até aplicado essa lógica desse site que você citou. O problema é que ele fixa a DIV normalmente, assim como o plugin scrolltofixed faz e eu precisava que esse processo de deixar ela fixa terminasse quando a barra de rolagem chegar próximo ao rodapé.

 

Vamos supor que a DIV tem que ficar fixa a partir de 50 pixels abaixo do topo da página, e o rodapé se encontra a 500 pixels do topo da página.

 

A lógica seria mais ou menos essa:

 

// posição inicial da DIV

Se (barra de rolagem) for >= 50 pixels

 

DIV {position:fixed;}

 

// posição final da DIV

Se (barra de rolagem) for >= 500 pixels

 

DIV {position:relative;}

[Douglas Matos 0]

Boa tarde Pessoal !!!

Depois de muito tempo estou postando nesse tópico, pois estou usando essa biblioteca jQuery ScrollFixed.

Bom o que eu preciso é exatamente o mesmo que o amigo Robert Pardim precisa.

Que é quando chegar no limit definido ele deixa de ser fixo, porem no meu caso ele não esta funcionando.

Quando ele chega no limite definido que seria o rodapé ele cria uma barra de rolagem na horizontal e "some da tela" vai parar la na esquerda.

Alguem teria uma solução para isso??

estou usando o seguinte código como na documentação da biblioteca recomenda.

$(".anuncio160x600").scrollToFixed({ marginTop:$('nav .navbar').outerHeight() + 40, 
        limit: function() {
            var limit = $('#paginations nav').offset().top - $('.anuncio160x600').outerHeight(true) - 10;
            return limit;
            console.log(limit);
        },
        zIndex: 999,
        postFixed: function() { $(this).css('postition', 'relative'); }
    });