Jump to content
WagnerFilho

CSS - Position: Sticky

Recommended Posts

Olá,

Seguindo exatamente o exemplo abaixo, alguém pode me ajudar a trabalhar o position:sticky

Hoje, a próxima data está se posicionando em cima da data atual.

Desta forma, a opacidade e a sombra da data está ficando em 100%, gerando uma visão grotesca, caso haja muitas datas.

Eu quero que a data anterior, suba com o scroll e dê lugar para a próxima data.

Se eu adicionar a data e os diálogos em um container, dá certo, porém, preciso trabalhar com o que tenho abaixo.


Javascript também é aceito para este trabalho

o que tenho até agora jsfiddle

 

<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="sticky">
    <meta name="viewport" content="width=device-width">
</head>

<body>
    <div class="chat">
        <div class="data">05/03/2019</div>
        <div class="box recebido">Olá</div>
        <div class="box enviado">Oi, tudo bem ?</div>
        <div class="data">06/03/2019</div>
        <div class="box recebido">Tudo bem!</div>
        <div class="box recebido">e voce ?</div>
        <div class="box enviado">Tudo bem tambem</div>
        <div class="box recebido">preciso de ajuda</div>
        <div class="box recebido">Voce pode me ajudar</div>
        <div class="data">07/03/2019</div>
        <div class="box enviado">Talvez sim</div>
        <div class="box enviado">O que voce precisa</div>
        <div class="box recebido">Como posso utilizar o position:sticky ?</div>
        <div class="box enviado">Deixe-me ver</div>
        <div class="box enviado">Acho que posso te ajudar</div>
        <div class="box recebido">Certo</div>
    </div>
</body>
<style>
    * {
        margin: 0px;
        padding: 0px;
    }
    
    .chat {
        overflow: auto;
        border: solid 1px black;
        position: fixed;
        left: 50%;
        top: 50%;
        background-color: #e5ddd5;
        z-index: 100;
        height: 500px;
        margin-top: -200px;
        width: 500px;
        margin-left: -300px;
    }
    
    .box {
        width: 300px;
        margin: 30px auto;
        padding: 20px;
        text-align: center;
        font-weight: 400;
        color: black;
        font-family: arial;
        position: relative;
        border-radius: 20px;
    }
    
    .box.enviado {
        background: #dcf8c6;
    }
    
    .box.recebido {
        background: white;
    }
    
    .recebido:before {
        content: "";
        width: 0px;
        height: 0px;
        position: absolute;
        border-left: 10px solid white;
        border-right: 10px solid transparent;
        border-top: 10px solid white;
        border-bottom: 10px solid transparent;
        left: 19px;
        bottom: -19px;
    }
    
    .enviado:before {
        content: "";
        width: 0px;
        height: 0px;
        position: absolute;
        border-left: 10px solid transparent;
        border-right: 10px solid #dcf8c6;
        border-top: 10px solid #dcf8c6;
        border-bottom: 10px solid transparent;
        right: 19px;
        bottom: -19px;
    }
    
    .data {
        background-color: rgba(225, 245, 254, 0.92);
        color: rgba(69, 90, 100, 0.95)!important;
        padding: 5px 12px 6px 12px!important;
        border-radius: 7.5px!important;
        box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13)!important;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4)!important;
        margin-bottom: 8px!important;
        margin-top: 8px!important;
        margin-right: auto!important;
        margin-left: auto!important;
        max-width: 75px;
        opacity: 0.8;
        z-index: 2;
    }
    
    .data {
        top: 10px;
        position: sticky;
    }
</style>

</html>

 

Share this post


Link to post
Share on other sites

Isso resolveria o seu problema:

 

JS:

const wrap = $(".chat");

wrap.on("scroll", function(e) {
  let data = $('.data');
  
  for(let i = 0; i < data.length; i++) {
    if(i > 0) {
      if(data[i-1].offsetTop === data[i].offsetTop) {
        $(data[i-1]).addClass("none-visible");
      } else {
        $(data[i-1]).removeClass("none-visible");
      }
    }
  }
});

CSS:

.none-visible {
  visibility: hidden;
}

link: https://jsfiddle.net/ebthd1gj/3/

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By gbL078
      Consegui resolver o problema, por favor podem deletar o tópico.
    • By guzulino
      Então... eu preciso inserir uma paulada de dados em um banco de dados de vez em quando, eu até consigo importar de um CSV pro banco, mas eu preciso fazer isso através do php e eu não tenho nem ideia de como fazer isso, procurei por aqui e não achei, se alguém tem alguma resposta ou referência, manda o link que eu vou dar uma olhada. Valeu.
    • By Guss
      A programadora Cafiaspirina Cruz deseja que todos os elementos <h2> de sua página ganhassem a classe "titulo", para que depois a fonte dos <h2> pudesse ser modificada por um CSS,  deixando-os com um destaque específico. Escreva abaixo um código em Javascript para que todos os <h2> da página ganhem a classe "titulo" de uma única vez?
    • By mxclxrx
      l>
          <head>
              <title>Pergunta 1</title>
          </head>
          <body>
              
              <h3>Pergunta 1</h3>
              <form name="resp" action="pergunta2.php" method="POST">
                  O que é nanotecnologia?<br><br>
                      a)<input type="radio" name="resposta" value="a">é a teoria física que obtém sucesso no estudo dos sistemas físicos cujas dimensões são próximas ou abaixo da escala atômica, tais como moléculas, átomos, elétrons, prótons e de outras partículas subatômicas, muito embora também possa descrever fenômenos macroscópicos em diversos casos.<br><br>
                      b)<input type="radio" name="resposta" value="b">é o estudo de manipulação da matéria em escala atômica e molecular e incluí o desenvolvimento de materiais que está associada a diversas áreas como a medicina, eletrônica, ciência da computação, física, química, biologia e engenharia dos materiais entre outras.<br><br>
                      c)<input type="radio" name="resposta" value="a">é a ciência que estuda a composição, estrutura, propriedades da matéria, as mudanças sofridas por ela durante as reações químicas e a sua relação com a energia.<br><br>
                      d)<input type="radio" name="resposta" value="a">baseia-se na lei da conservação das massas, na lei das proporções definidas e na lei das proporções múltiplas. <br><br>
                      e)<input type="radio" name="resposta" value="a">são protozoários caracterizados pela presença de organelos em forma de pêlos ou tentáculos sugadores chamados cílios.<br><br>
                      
                      <br><br>
                      <input type="submit" name="confirmar" value="confirmar">
              </form>
              <?php
                  
                  if(isset($_POST['confirma'])){
                      $resposta= $_POST['resposta'];
                      $certa= $_POST['certa'];
                      $certa= "b";s
                  
                  if($resposta==$certa){
                      echo('<script>window.alert("Parabens! Voce acertou!");window.location="pergunta2.php";</script>');
                  }else{
                      header('location:pergunta1.php');
                  }
                  }
              ?>
              
          </body>
      </html>
    • By andre2654
      Bom dia, peço humildemente a ajuda de vocês,
      Enfim, estou fazendo um exemplo de site, só para teste mesmo, onde terá uma janela principal perguntando em qual site a pessoa quer ir(1 só empresa, porém dois negócios) ai se a pessoa clicar em alguma das melecas, quero que ela abra mostrando o site, ou só uma imagem mesmo

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.