Position: Sticky CSS or JS

Asked

Viewed 315 times

1

Hello,

Following exactly the example below, someone can help me to work the position:sticky

Today, the next date is standing on top of the current date.

In this way, the opacity and shadow of the date is getting at 100%, generating a grotesque view, if there are many dates.

I want the previous date, go up with the scroll and make way for the next date.

If I add the date and dialogs in a container, it works, however, I need to work with what I have below.

What I have so far is totally in CSS, but due to the difficulty of keeping in CSS, I will need to include Javascript, but I could not get the expected result

fiddle

<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>

html css

  • Since you cannot place each date and dialogs separated by containers, pq does not put the shadow and transparency only on the first date ?

  • Can’t you just remove the transparency of dates? Because position: sticky it works like this, they’ll all stop us 10px that you indicated and can see the ones behind as they stack.

  • I could take away the opacity, but what about the shadow? I would have to take away too..

  • Do these answers suggest that there is no possibility? Not even using Javascript if applicable?

1 answer

1


I made a model, I don’t know if it’ll suit you...

What I did was turn the date box into a pseudo-element after, and I created a pseudo-element before to use as a date mask below.

Basically what I have is a before that will completely cover up whatever is below. It works well with cores sólidas (e. g #ddd), and with picture gets relatively good tb, you will need to use a background-attachment: fixed; and the same image as background of .chat and that pseudo-elemento ::before date

inserir a descrição da imagem aqui

Follow the image code above

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}


* {
    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 {
    color: rgba(69, 90, 100, 0.95)!important;
    margin-bottom: 8px!important;
    margin-top: 8px!important;
    margin-right: auto!important;
    margin-left: auto!important;
    padding: 5px 12px 6px 12px!important;
    max-width: 75px;
    z-index: 2;
}
.data::after {
    content: "";
    background-color: rgba(225, 245, 254, 0.92);
    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;
    width: 75px;
    opacity: 0.8;
    z-index: -1;
    top: 0%;
    height: 50%;
    left: 0;
    position: absolute;
    z-index: -1;
}


.data {
    top: 10px;
    position: sticky;
}

.data::before {
    content: "";
    width: 483px;
    height: 38px;
    background-color: #e5ddd5;
    top: -10px;
    left: -192px;
    display: block;
    position: absolute;
    z-index: -2;
}
.data:not(:first-child)::before {
    top: 0px;
    height: 28px;
}

.chat,
.data::before {
    background-image: url(https://66.media.tumblr.com/31a78c6e15775efdc87861661736adf2/tumblr_inline_mkjkugRR1f1qz4rgp.gif);
    background-position: top center;
    background-attachment: fixed;
}
<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>

  • would appreciate if there is a header type for the date, where the dialog disappears in scroll, but maybe this is the solution, since, possibly it will be necessary to use javascript, where I even tried, but I haven’t yet achieved the expected result.

  • @Wagnerson, I have no knowledge of JS to help you with this part. But with CSS I believe that there is no way to do exactly as you want, any solution that appears will be a "way" as the proposal I made. Something simple would be to leave the shadow only on the first date, so the subsequent ones will kind of use without a shadow only referring to that of the first date element. Or else you’ll have to figure out a way to put a container a day with the date and the texts inside, something you don’t seem to like doing... If you have any questions about the answer just ask []s

  • ... @Wagnerson and another thing you can do is try to give another finish to this solution to make it look better without this dry cut. Maybe something like this image http://prntscr.com/mv27io or something like that

  • Got it.. in this case there is possibility to add a class to the previous date ? As soon as a new date takes its place

  • @Wagnerfilho com js I believe so, when the next date reaches the top 30 for example, you remove the date that is in the top 10. But this only with js or jQuery, with pure CSS you can not change class in scroll event. As I said I don’t know much about js and I can’t help you with js, but with CSS I don’t think I have much better option than this, until Pq nobody even tried to answer... A pity

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.