0

Estou tentando fazer algo parecido a isto: https://www.chipart.com.br/computadores/monte_seu_pc onde a div contendo os valores da compra fica fixa somente enquanto as opções de customização estão visíveis, porém creio que não seja possível fazer isto com 'fixed', a única coisa que consegui fazer até o momento é deixar esta 'caixa' com os valores fixa em toda a página.

Alguém saberia me indicar alguma solução?

1

3 Respostas 3

2

Pode usar o plugin jquery Sticky-Kit.

Sticky-kit fixa os elementos na página quando o usuário faz scroll de maneira que esse elemento fica sempre visível.

Com ele basta selecionar um elemento e aplicar uma função:

$("#sidebar").stick_in_parent();

Exemplo prático:

http://jsfiddle.net/jomar/w4Lu98nd/1/

1
  • 1
    Desculpa @mdma, eu queria responder sugerindo o mesmo plugin, mas para não "duplicar" acresci apenas um exemplo da utilização no fiddle. :D
    – Cold
    8/10/2014 às 16:08
0

Você pode tentar usando jQuery:

$(window).bind('scroll', function() {
     if ($(window).scrollTop() > POSIÇÃO_Y) {
         $('.sua_div').addClass('fixed');
     }
     else {
         $('.sua_div').removeClass('fixed');
     }
});

Assim, sempre que o scroll da página passar do POSIÇÃO_Y, a div terá a classe .fixed, aí no CSS você declara essa classe pra div ficar com position: fixed

-1

Basta criar uma div fixada que aparece e desaparece utilizando o display:none. Isso acontece também em pc gamer.

1
  • Tem como aprofundar sua resposta? Dá para fazer um exemplo executável usando os snippets aqui do Stack Overfllow 10/12/2018 às 12:37

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 .