1

Bom não sei nem perguntar e nomear como é o nome dessa funcionalidade, algo semelhante ao site da Airbnb quando o card lateral direito chega ao topo da pagina ele fica fixo movendo apenas o conteúdo do meio da página.

Como fazer algo parecido com isso ?

Até achei esta resposta @6153074 porém este está sumindo no meu caso não posso dar fadeIn ou fadeOut

Não estou conseguindo, olha como está.

.banner-full {
    img {
        width: 99vw !important;
        height: 70vh !important;
    }

    .cardContact {
        height: 500px;
        background-color: red;
        width: 400px;

        position: sticky;
        top: 900px; /* distancia que o elemento vai parar antes do topo */
    }
}
<div class="banner-full">
    <img src="https://picsum.photos/1585/552/?random" alt="">
    <div class="row">
        <div class="col m6" style="height: 3000px">

        </div>
        <div class="col m6">
            <div class="cardContact">

            </div>
        </div>
    </div>
</div>

Esta aparecendo desta maneira no DevTools do chrome:

inserir a descrição da imagem aqui

7
  • Ele define a div com "position:fixed", quando o "scroll" chega ao topo dessa div Commented 12/09/2018 às 11:43
  • 1
    Leia sobre: position sticky Commented 12/09/2018 às 11:43
  • @WallaceMaxters, sim mas lembrando que o position sticky não é suportado por todos os browsers ainda, assim, na verdade em sua maior parte verssões antigas como chrome, se ele quiser algo crossbrowser seria melhor usar o position fixed e javascript >> caniuse.com/#feat=css-sticky aqui tem uma lista de navegadores suportados[ Commented 12/09/2018 às 11:45
  • @MarcosBrinner na verdade só não funciona no IE... Então eu diria que o suporte atende 95% dos navegadores....
    – hugocsl
    Commented 12/09/2018 às 11:54
  • Muito obrigado, se alguem quiser formular uma resposta para que eu aceite, fique a vontade. Commented 12/09/2018 às 12:03

1 Resposta 1

4

Acredito que o suporte dos browser não seja tão ruim assim, apesar de não funcionar no IE, a opção do position:sticky Aqui vc pode consultar o suporte da propriedade: https://caniuse.com/#feat=css-sticky

Veja o Exemplo: (deixei os comments no css para facilitar)

body{
  height: 1000px;
}
.box {
    position: sticky;
    top: 50px; /* distancia que o elemento vai parar antes do topo */
    width: 50px;
    height: 50px;
    background: #f00;
    margin-top: 160px; /* distancia que o elemento vai estar do topo antes da rolagem */
    margin-right: 50px;
    margin-left: auto;
}
<div class="box"></div>


EDIT:

Exemplo de código depois da átualização da pergunta feita pelo autor

(veja esse exemplo em "Página toda" para ver melhor o resultado)

.banner-full img {
  width: 99vw !important;
  height: 70vh !important;
}

.cardContact {
  height: 500px;
  background-color: red;
  width: 400px;

  position: sticky;
  top: 60px;
  /* distancia que o elemento vai parar antes do topo */
}
<div class="banner-full">
  <img src="https://picsum.photos/1585/552/?random" alt="">

  <div class="row" style="">
    <div class="col m6" style="height: 1000px">
    </div>
    <div class="col m6">
      <div class="cardContact">
      </div>
    </div>
    <div class="col m6" style="height: 500px">
    </div>
  </div>

  <div class="cardContact" style="height: 100px; background:blue;">
    <div class="">
      gdfgfdgfd
      </div>
  </div>

  <div class="row" style="">
    <div class="col m6" style="height: 1000px">
    </div>
    <div class="col m6">
      <div class="cardContact">
      </div>
    </div>
    <div class="col m6" style="height: 1500px">
    </div>
  </div>

</div>

4
  • Poderia me ajudar para ver aonde estou errando, não está dando. Atualizei minha pergunta Commented 12/09/2018 às 13:55
  • @RenanRodrigues já entendi o seu problema. Se a .ROW não vai ser travada então não tem como "travar" um elemento que está dentro dela, pois vc não consegue travar "meia div" entende. Editei a resposta e coloquei mais um exemplo utilizando o código que vc colocou na atualização da pergunta.
    – hugocsl
    Commented 12/09/2018 às 14:23
  • Tudo certo agora, obrigado. Commented 12/09/2018 às 14:37
  • @RenanRodrigues Tranquilo jovem boa sorte ai!
    – hugocsl
    Commented 12/09/2018 às 14:56

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 .