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 ivanjrx
      bom pessoal estou montando um projeto em Arduíno mais não entendo quase nada de php, eu queria fazer um botão on-off no mesmo botão, para quando pressionar ligar e para quando soltar desligar parecido com botão de voz do whatsApp quando solta para de gravar nesse caso eu quero pra quando soltar desligar. no projeto já adicionei um botão submit mais queria que esse mesmo botão fizesse essa as duas funções igual descrevo acima. 
      <html> <head> <title>Arduino Controlled Based PHP</title> </head> <body> <?php echo "<p>Control Page</p><p>"; $port = fopen("COM7", "w+"); sleep(0); ?> <br> <form action="index.php" method="POST"> <input type="hidden" name="turn" value="on" /> <input type="Submit" value="on"> </form> <form action="index.php" method="POST"> <input type="hidden" name="turn" value="off" /> <input type="Submit" value="off"> </form> <?php if ($_POST['turn']=="on") { echo "Turned on"; fwrite($port, "n"); } if ($_POST['turn']=="off") { echo "Turned off"; fwrite($port, "f"); } fclose($port); ?> </body> </html>  
    • By Thiago Napoleão
      bom dia
      estou tentando listar os produtos inserido no banco sqlite, mas não consigo retornar para a pagina html.
      segue codigo
      database.service.ts -------- repare que o console.log(this.row_data) funciona...
      getRowsProduto(): any { console.log("getRowsProduto"); this.databaseObj.executeSql("SELECT * FROM produtos", []) .then((res: any) => { if (res.rows.length > 0) { for (var i = 0; i < res.rows.length; i++) { this.row_data.push(res.rows.item(i)); console.log(this.row_data); } } return this.row_data; }) .catch(e => { alert("error " + JSON.stringify(e)) console.log("error getRows" + JSON.stringify(e)); }); } produtos.page.ts ------ o console.log(this.listaprodutos); não retorna nada.
      import { Component, OnInit } from ''''''''''''''''''''''''''''''''@angular/core''''''''''''''''''''''''''''''''; import { SQLite, SQLiteObject } from ''''''''''''''''''''''''''''''''@ionic-native/sqlite/ngx''''''''''''''''''''''''''''''''; import { DatabaseService } from ''''''''''''''''''''''''''''''''../../provider/database.service''''''''''''''''''''''''''''''''; import { Produto } from ''''''''''''''''''''''''''''''''./produto.modelo''''''''''''''''''''''''''''''''; @Component({ selector: ''''''''''''''''''''''''''''''''app-produtos'''''''''''''''''''''''''''''''', templateUrl: ''''''''''''''''''''''''''''''''./produtos.page.html'''''''''''''''''''''''''''''''', styleUrls: [''''''''''''''''''''''''''''''''./produtos.page.scss''''''''''''''''''''''''''''''''], }) export class ProdutosPage implements OnInit { prod: Produto = new Produto(); listaprodutos: any [] = []; constructor(private sqlite: SQLite, private ds: DatabaseService) {} ngOnInit() { } insert() { this.ds.insertProduto(this.prod); } getRows(): any { console.log(''''''''''''''''''''''''''''''''getRows()''''''''''''''''''''''''''''''''); this.listaprodutos = this.ds.getRowsProduto(),[]; console.log(this.listaprodutos); } o console.log do database.serice.ts mostra o array
      mas o console.log do produtos.page.ts não mostra nada, aparece "undefined"
      console do emulador
      getRows() getRowsProduto undefined Array(8) Array(8) Array(8) Array(8) Array(8) Array(8) Array(8) Array(8) 0: {id: 1, descricao: "ffffffffff", ean: 2222222, tipo: "BEBIDA"} 1: {id: 2, descricao: "6yyyyyyyy", ean: 6666, tipo: "FRUTAS E VERDURAS"} 2: {id: 3, descricao: "6yyyyyyyy", ean: 6666, tipo: "FRUTAS E VERDURAS"} 3: {id: 4, descricao: "ggggg", ean: 555555, tipo: "BEBIDA"} 4: {id: 5, descricao: "tttttttttttt", ean: 22222222222, tipo: "ALIMENTOS"} 5: {id: 6, descricao: "ffffffff", ean: 55555, tipo: "FRIOS"} 6: {id: 7, descricao: "ffffffff", ean: 55555, tipo: "FRIOS"} 7: {id: 8, descricao: "ffffffffff", ean: 33333333, tipo: "FRIOS"} length: 8 __proto__: Array(0)
    • By ckcesar
      Galera alguém pode me ajudar, eu gerei uma Build com AngularCli e tento rodar ela com o Cordova e ao inspecionar no Chrome me retorna o seguinte erro no console:
      main-es2015.7678d805abc29502169b.js:1 Service worker registration failed with: TypeError: Failed to register a ServiceWorker: The URL protocol of the current origin ('file://') is not supported. at g._next (main-es2015.7678d805abc29502169b.js:1) at g.__tryOrUnsub (main-es2015.7678d805abc29502169b.js:1) at g.next (main-es2015.7678d805abc29502169b.js:1) at f._next (main-es2015.7678d805abc29502169b.js:1) at f.next (main-es2015.7678d805abc29502169b.js:1) at Kl._next (main-es2015.7678d805abc29502169b.js:1) at Kl.next (main-es2015.7678d805abc29502169b.js:1) at Dl._next (main-es2015.7678d805abc29502169b.js:1) at Dl.next (main-es2015.7678d805abc29502169b.js:1) at G.notifyNext (main-es2015.7678d805abc29502169b.js:1)  
    • By geoleandro
      O botão voltar funciona, mas ele adiciona uma questão na variável "numQ".
      Onde está o erro no código abaixo:
      <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .imgbox { float: left; text-align: center; width: 150px; border: 1px solid #ddd; margin: 4px; padding: 5px; } #mylabel { text-align: left; } </style> <body onload="loadquestion()"> <p id="numQ"> <p id="mylabel" name="questao">Questões</p><br> <div class="imgbox" id="imgbox1"><br> <input type="image" src=" " width =auto height= 80px id="btn0" value="option0" name="opt0" onclick="checkans(1)"><br><br> </div> <div class="imgbox" id="imgbox2"><br> <input type="image" src=" " width =auto height= 80px id="btn1" value="option1" name="opt1" onclick="checkans(2)"><br><br> </div> <br><br><br><br><br><br><br><br><br> <div class="imgbox" id="imgbox3"><br> <input type="image" src=" " width =auto height= 80px id="btn2" value="option2" name="opt2" onclick="checkans(3)"><br><br> </div> <div class="imgbox" id="imgbox4"><br> <input type="image" src=" " width =auto height= 80px id="btn3" value="option3" name="opt3" onclick="checkans(4)"><br><br> </div> <br><br><br><br><br><br> <br><br><br><br> <input type="button" id="next" value="Próximo" name="nxtbtn" onclick="changequestion()"><br><br> <input type="button" id="back" value="voltar" name="bkbtn" onclick="backQ()"><br><br> <p id="erro"> <p id="pontos"> <p id="questAtual"> <script type="text/javascript"> i=0; var pontos = 0; var numQ = 1; myqs=[["Clique na foto 3 ?","img3.gif", "img2.gif","img1.gif","img1a.gif","3"], ["Clique na foto 2 ?","icone.png","icone2.png","certo.png","certo.png","2"], ["Clique na foto 4","icone.png","errado.png","certo.png","certo.png","4"] ]; function loadquestion() { document.getElementById("mylabel").innerHTML= myqs[i][0]; document.getElementById("btn0").src= myqs[i][1]; document.getElementById("btn1").src= myqs[i][2]; document.getElementById("btn2").src= myqs[i][3]; document.getElementById("btn3").src= myqs[i][4]; document.getElementById ("numQ").innerHTML = "Questão " + numQ + " de " + myqs.length; document.getElementById("next").value = "Próximo"; document.getElementById("next").style.backgroundColor = "lightgray"; numQ++; document.getElementById("imgbox1").style.backgroundColor = "white"; document.getElementById("imgbox2").style.backgroundColor = "white"; document.getElementById("imgbox3").style.backgroundColor = "white"; document.getElementById("imgbox4").style.backgroundColor = "white"; document.getElementById("erro").innerHTML = ""; document.getElementById("erro").style.color = ""; } function changequestion(){ i=i+1; loadquestion(); } function backQ(){ loadquestion(); i=i-1 } function checkans(a){ respostas =parseInt(myqs[i][5]); if(respostas==a && respostas==3){ pontos++; document.getElementById ("pontos").innerHTML = "Você acertou " + pontos ; document.getElementById("imgbox3").style.backgroundColor = "#99ff99"; } else if(respostas==a && respostas==2){ pontos++; document.getElementById ("pontos").innerHTML = "Você acertou " + pontos ; document.getElementById("imgbox2").style.backgroundColor = "#99ff99"; } else if(respostas==a && respostas==4){ pontos++; document.getElementById ("pontos").innerHTML = "Você acertou " + pontos ; document.getElementById("imgbox4").style.backgroundColor = "#99ff99"; } else { document.getElementById("erro").innerHTML = "Incorreta"; document.getElementById("erro").style.color = "red"; } } </script> </head> </body> </html>  
    • By acneto.frc
      Boa tarde a todos!
      Estou trabalhando em uma aplicação Node-Express-Html-Bootsrap-Javascript-mysql, etc...
      Arquitetura MVC.
      Tenho um determinado formulário (document) que antes de renderizá-lo faço uma chamada a função sql da model e recebo como retorno um objeto sql (result).
      Ao renderizar o formulário passo o objeto como parâmetro para o html.
      Dentro do htm tenho acesso aos elementos do objeto os quais apresento em uma tabela.
      Depois disso preciso que uma função javascript seja executada mas não sei como fazer para que a função tenha acesso ao objeto.
      Anexo segue uma imagem como as fases de execução do programa
      Abraços a todos e obrigado!

×

Important Information

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