Sticky Header Like Slack

Question

I am trying to replicate the layout of Slack. One thing I cannot get working is getting the date to overlap the header. I inspected the Slack HTML/CSS and they are using a combination of Sticky and absolute positioning. I would prefer to use relative positioning.

HTML

<html>

<head>
    <title>Slack</title>
    <link href="https://a.slack-edge.com/bv1-8-8cacda2/slack-icons-v2-71d3b78.woff2" rel="preload" as="font" crossorigin="anonymous">
    <link href="https://a.slack-edge.com/bv1-8-8cacda2/lato-regular-d9ce515.woff2" rel="preload" as="font" crossorigin="anonymous">
    <link href="https://a.slack-edge.com/bv1-8-8cacda2/lato-black-b64f5e4.woff2" rel="preload" as="font" crossorigin="anonymous">
    <link href="https://a.slack-edge.com/bv1-8-8cacda2/lato-bold-4b1dc11.woff2" rel="preload" as="font" crossorigin="anonymous">
    <link rel="stylesheet" href="./styles.css">
</head>

<body class="sk-client-theme--dark">
    <div class="p-client_container">
        <div class="p-client">
            <div class="p-workspace p-workspace--context-pane-expanded p-workspace--classic-nav">
                <div class="p-workspace__banner"></div>

                <div class="p-workspace__top_nav">
                    <div class="p-classic_nav">
                        <div class="p-classic_nav__team_header"></div>

                        <div class="p-classic_nav__channel_header p-classic_nav__model_header"></div>

                        <div class="p-classic_nav__right_header p-classic_nav__right_header--context_pane"></div>
                    </div>
                </div>

                <div class="p-workspace__sidebar">
                    <nav class="p-channel_sidebar p-channel_sidebar--classic_nav">
                        <div class="p-channel_sidebar__navigation_bar">Navigation</div>

                        <div class="p-channel_sidebar__list">
                            <span>sidebar content first<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content last<br></span>
                        </div>
                    </nav>
                </div>

                <div class="p-workspace__primary_view">
                    <div class="p-workspace__primary_view_contents">
                        <div class="p-file_drag_drop__container">
                            <div class="p-message_pane p-message_pane--classic-nav">
                                <div class="c-virtual_list__item">
                                    <span>Primary View Content 1<br></span><span>Primary View Content<br></span>
                                </div>

                                <div class="c-virtual_list__item--sticky c-virtual_list__item" id="1572872400000.GLQ5WA3J7">
                                    <div class="c-message_list__day_divider__label">
                                        <div class="c-message_list__day_divider__label__pill">Sticky 1</div>
                                    </div>
                                </div>

                                <div class="c-virtual_list__item">
                                    <span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span>
                                </div>

                                <div class="c-virtual_list__item--sticky c-virtual_list__item" id="1572872400000.GLQ5WA3J7">
                                    <div class="c-message_list__day_divider__label">
                                        <div class="c-message_list__day_divider__label__pill">Sticky 2</div>
                                    </div>
                                </div>

                                <div class="c-virtual_list__item">
                                    <span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content Last<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content Last<br></span>
                                </div>
                            </div>

                            <footer class="workspace__primary_view_footer">Footer1<br>Footer2</footer>
                        </div>
                    </div>
                </div>

                <div class="p-workspace__secondary_view"></div>
            </div>
        </div>
    </div>
</body>

</html>

CSS

/************ reset ************/

*, ::after, ::before {
    box-sizing: inherit;
}

body, html {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

blockquote, body, caption, dd, dl, fieldset, figure, form, h1, h2, h3, h4, h5, h6, hr, legend, ol, p, pre, table, td, th, ul {
    margin: 0;
    padding: 0;
}

body {
    background-color: #1a1d21;
}

*, ::after, ::before {
    box-sizing: inherit;
}

a {
    color: rgba(var(--sk_highlight, 18, 100, 163), 1);
    text-decoration: none;
}

/************ fonts ************/

@font-face {
    font-family: Slack-Lato;
    font-style: normal;
    font-weight: 300;
    src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-light-0b50f74.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-light-1475c14.woff) format("woff");
    unicode-range: U+0000-f8fe, U+f900-ffff
}

@font-face {
    font-family: Slack-Lato;
    font-style: normal;
    font-weight: 400;
    src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-regular-d9ce515.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-regular-ea6d1e4.woff) format("woff");
    unicode-range: U+0000-f8fe, U+f900-ffff
}

@font-face {
    font-family: Slack-Lato;
    font-style: normal;
    font-weight: 700;
    src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-bold-4b1dc11.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-bold-a532381.woff) format("woff");
    unicode-range: U+0000-f8fe, U+f900-ffff
}

@font-face {
    font-family: Slack-Lato;
    font-style: normal;
    font-weight: 900;
    src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-black-b64f5e4.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-black-8857ce8.woff) format("woff");
    unicode-range: U+0000-f8fe, U+f900-ffff
}

@font-face {
    font-family: Slack-Lato;
    font-style: italic;
    font-weight: 300;
    src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-light-c593311.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-light-354fb58.woff) format("woff");
    unicode-range: U+0000-2259, U+2261-f8fe, U+f900-ffff
}

@font-face {
    font-family: Slack-Lato;
    font-style: italic;
    font-weight: 400;
    src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-5bbcd6c.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-d5261ac.woff) format("woff");
    unicode-range: U+0000-2259, U+2261-f8fe, U+f900-ffff
}

@font-face {
    font-family: Slack-Lato;
    font-style: italic;
    font-weight: 700;
    src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-bold-99def7d.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-bold-2187a11.woff) format("woff");
    unicode-range: U+0000-2259, U+2261-f8fe, U+f900-ffff
}

@font-face {
    font-family: Slack-Lato;
    font-style: italic;
    font-weight: 900;
    src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-black-04aca50.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-black-23c1971.woff) format("woff");
    unicode-range: U+0000-2259, U+2261-f8fe, U+f900-ffff
}

@font-face {
    font-family: Slack v2;
    src: url(https://a.slack-edge.com/bv1-8-8cacda2/slack-icons-v2-71d3b78.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/slack-icons-v2-3e925bf.woff) format("woff");
    font-style: normal;
    font-weight: 400
}

body {
    font-family: Slack-Lato, appleLogo, sans-serif;
}

body {
    font-size: 15px;
    line-height: 1.46668;
    font-weight: 400;
    color: white;
    font-variant-ligatures: common-ligatures;
}

/************ client ************/

.p-client {
    overflow: hidden;
}

.p-client {
    background: rgba(var(--sk_primary_background, 255, 255, 255), 1);
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto;
    grid-template-areas: "p-client__workspace";
}

/************ workspace ************/

.p-workspace {
    grid-area: p-client__workspace;
}

.p-workspace, .p-workspace__primary_view, .p-workspace__primary_view_contents, .p-workspace__secondary_view {
    min-width: 0;
    min-height: 0;
}

.p-workspace {
    display: grid;
    grid-template-rows: min-content 60px auto
}

/*** workspace context pane ***/

.p-workspace--context-pane-collapsed {
    grid-template-columns: 220px auto;
    grid-template-areas: "p-workspace__banner p-workspace__banner" "p-workspace__top_nav p-workspace__top_nav" "p-workspace__sidebar p-workspace__primary_view"
}

.p-workspace--context-pane-expanded {
    grid-template-columns: 220px auto 312px;
    grid-template-areas: "p-workspace__banner p-workspace__banner p-workspace__banner" "p-workspace__top_nav p-workspace__top_nav p-workspace__top_nav" "p-workspace__sidebar p-workspace__primary_view p-workspace__secondary_view"
}

@media screen and (min-width:1440px) {
    .p-workspace--context-pane-expanded {
        grid-template-columns: 220px auto 492px
    }
}

@media screen and (max-width:1440px) {
    .p-workspace--context-pane-expanded {
        grid-template-columns: 220px auto 442px
    }
}

@media screen and (max-width:1366px) {
    .p-workspace--context-pane-expanded {
        grid-template-columns: 220px auto 392px
    }
}

@media screen and (max-width:1279px) {
    .p-workspace--context-pane-expanded {
        grid-template-columns: 220px auto 367px
    }
}

@media screen and (max-width:1070px) {
    .p-workspace--context-pane-expanded {
        grid-template-columns: 220px auto 337px
    }
}

@media screen and (max-width:860px) {
    .p-workspace--context-pane-expanded {
        grid-template-columns: 220px auto 312px
    }
}

/************ banner ************/

.p-workspace__banner {
    grid-area: p-workspace__banner;
}

/************ top nav ************/

.p-workspace__top_nav {
    background: #1abc9c;
    grid-area: p-workspace__top_nav;
    min-width: 0;
}

/************ classic nav ************/

.p-classic_nav {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

/************ team header ************/

.p-classic_nav__team_header {
    background: #2ecc71;
}

.p-classic_nav__team_header {
    flex-shrink: 0;
    width: 220px;
    height: 60px;
}

/************ channel header ************/

.p-classic_nav__channel_header {
    background: #9b59b6;
    display: flex;
    flex: 1;
    height: 60px;
    min-width: 0;
    position: relative;
}

/************ right header ************/

.p-classic_nav__right_header {
    flex-shrink: 0;
    height: 60px;
    display: flex;
    align-items: center;
}

@media screen and (min-width:1440px) {
    .p-classic_nav__right_header {
        width: 415px
    }
    .p-classic_nav__right_header--context_pane {
        width: 492px
    }
}

@media screen and (max-width:1440px) {
    .p-classic_nav__right_header {
        width: 365px
    }
    .p-classic_nav__right_header--context_pane {
        width: 442px
    }
}

@media screen and (max-width:1366px) {
    .p-classic_nav__right_header {
        width: 315px
    }
    .p-classic_nav__right_header--context_pane {
        width: 392px
    }
}

@media screen and (max-width:1279px) {
    .p-classic_nav__right_header {
        width: 300px
    }
    .p-classic_nav__right_header--context_pane {
        width: 367px
    }
}

@media screen and (max-width:1070px) {
    .p-classic_nav__right_header {
        width: 280px
    }
    .p-classic_nav__right_header--context_pane {
        width: 337px
    }
}

@media screen and (max-width:860px) {
    .p-classic_nav__right_header {
        width: 250px
    }
    .p-classic_nav__right_header--context_pane {
        width: 312px
    }
}

/************ side bar ************/

.p-workspace__sidebar {
    grid-area: p-workspace__sidebar;
    display: grid;
    grid-template-columns: auto;
    position: relative;
}

.p-workspace--classic-nav .p-workspace__sidebar {
    grid-template-areas: "p-workspace__channel_sidebar";
    grid-template-rows: auto;
}

.p-workspace__channel_sidebar {
    grid-area: p-workspace__channel_sidebar;
}

.p-channel_sidebar {
    background: #34495e;
    width: 220px;
    flex: 1;
    height: 100%;
    position: relative;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.p-channel_sidebar__navigation_bar {
    background: #f1c40f;
}

.p-channel_sidebar__list {
    flex: 1 1 auto;
    overflow-y: auto;
    height: 0;
}

/************ common ************/

.p-workspace, .p-workspace__primary_view, .p-workspace__primary_view_contents, .p-workspace__secondary_view {
    min-width: 0;
    min-height: 0;
}

/************ primary view ************/

.p-workspace--classic-nav .p-workspace__primary_view {
    grid-template-areas: "p-workspace__primary_view_contents";
    grid-template-rows: auto;
}

.p-workspace__primary_view {
    grid-area: p-workspace__primary_view;
    display: grid;
    grid-template-columns: auto;
    background: #e67e22;
}

.p-workspace__primary_view_contents {
    display: flex;
    flex-direction: column;
    grid-area: p-workspace__primary_view_contents;
}

.p-file_drag_drop__container {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    background: red;
}

.p-message_pane {
    background: #3498db;
    flex: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

.workspace__primary_view_footer {
    background: #bdc3c7;
}

/* sticky */

.c-virtual_list__item--sticky {
    position: sticky;
    top: -21px;
    z-index: 200;
}

.c-message_list__day_divider__label__pill {
    background:  white;
    display: inline-block;
    z-index: 201;
    padding: .25rem .75rem;
    border-radius: 24px;
    position: relative;
    color: black;
}


/************ secondary view ************/

.p-workspace--classic-nav .p-workspace__secondary_view {
    grid-template-areas: "p-workspace__secondary_view_contents";
    grid-template-rows: auto;
    background: #e74c3c;
}

Link to jsbin

Sticky under header:

@Manikandan2811 Yes Sticky1 and Sticky2 are like the Slack dates. — Anindha, Feb 18 '20 at 07:19
@Awais I want the sticky boxes to overlap the header, hence the need for a negative top. — Anindha, Feb 18 '20 at 07:23
Ok like you need to make date above header not below header i mean to overlap on header — Awais, Feb 18 '20 at 07:24
@Awais I have set the z-index. You can play with the code on jsbin. Please let me know if you get it working. — Anindha, Feb 18 '20 at 07:25
@AnindhaParthy may be this could help you, you need to change structure as mention here https://stackoverflow.com/questions/5218927/z-index-not-working-with-fixed-positioning — Awais, Feb 18 '20 at 07:53
@Awais putting the primary window above the the top nav didn't make a difference. I have set the z-index of the sticky label to 200 so not sure what the issue is. — Anindha, Feb 18 '20 at 08:16

score 1 · Answer 1 · answered Feb 18 '20 at 09:16

The closest solution i got, simple i put that purple part inside the blue one to make z-index work

/************ reset ************/

*, ::after, ::before {
 box-sizing: inherit;
}

body, html {
 box-sizing: border-box;
 width: 100%;
 height: 100%;
 overflow: hidden;
}

blockquote, body, caption, dd, dl, fieldset, figure, form, h1, h2, h3, h4, h5, h6, hr, legend, ol, p, pre, table, td, th, ul {
 margin: 0;
 padding: 0;
}

body {
 background-color: #1a1d21;
}

*, ::after, ::before {
 box-sizing: inherit;
}

a {
 color: rgba(var(--sk_highlight, 18, 100, 163), 1);
 text-decoration: none;
}

/************ fonts ************/

@font-face {
 font-family: Slack-Lato;
 font-style: normal;
 font-weight: 300;
 src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-light-0b50f74.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-light-1475c14.woff) format("woff");
 unicode-range: U+0000-f8fe, U+f900-ffff
}

@font-face {
 font-family: Slack-Lato;
 font-style: normal;
 font-weight: 400;
 src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-regular-d9ce515.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-regular-ea6d1e4.woff) format("woff");
 unicode-range: U+0000-f8fe, U+f900-ffff
}

@font-face {
 font-family: Slack-Lato;
 font-style: normal;
 font-weight: 700;
 src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-bold-4b1dc11.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-bold-a532381.woff) format("woff");
 unicode-range: U+0000-f8fe, U+f900-ffff
}

@font-face {
 font-family: Slack-Lato;
 font-style: normal;
 font-weight: 900;
 src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-black-b64f5e4.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-black-8857ce8.woff) format("woff");
 unicode-range: U+0000-f8fe, U+f900-ffff
}

@font-face {
 font-family: Slack-Lato;
 font-style: italic;
 font-weight: 300;
 src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-light-c593311.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-light-354fb58.woff) format("woff");
 unicode-range: U+0000-2259, U+2261-f8fe, U+f900-ffff
}

@font-face {
 font-family: Slack-Lato;
 font-style: italic;
 font-weight: 400;
 src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-5bbcd6c.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-d5261ac.woff) format("woff");
 unicode-range: U+0000-2259, U+2261-f8fe, U+f900-ffff
}

@font-face {
 font-family: Slack-Lato;
 font-style: italic;
 font-weight: 700;
 src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-bold-99def7d.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-bold-2187a11.woff) format("woff");
 unicode-range: U+0000-2259, U+2261-f8fe, U+f900-ffff
}

@font-face {
 font-family: Slack-Lato;
 font-style: italic;
 font-weight: 900;
 src: local("\263A"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-black-04aca50.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/lato-italic-black-23c1971.woff) format("woff");
 unicode-range: U+0000-2259, U+2261-f8fe, U+f900-ffff
}

@font-face {
 font-family: Slack v2;
 src: url(https://a.slack-edge.com/bv1-8-8cacda2/slack-icons-v2-71d3b78.woff2) format("woff2"), url(https://a.slack-edge.com/bv1-8-8cacda2/slack-icons-v2-3e925bf.woff) format("woff");
 font-style: normal;
 font-weight: 400
}

body {
 font-family: Slack-Lato, appleLogo, sans-serif;
}

body {
 font-size: 15px;
 line-height: 1.46668;
 font-weight: 400;
 color: white;
 font-variant-ligatures: common-ligatures;
}

/************ client ************/

.p-client {
 overflow: hidden;
}

.p-client {
 background: rgba(var(--sk_primary_background, 255, 255, 255), 1);
 width: 100vw;
 height: 100vh;
 display: grid;
 grid-template-rows: auto;
 grid-template-columns: auto;
 grid-template-areas: "p-client__workspace";
}

/************ workspace ************/

.p-workspace {
 grid-area: p-client__workspace;
}

.p-workspace, .p-workspace__primary_view, .p-workspace__primary_view_contents, .p-workspace__secondary_view {
 min-width: 0;
 min-height: 0;
}

.p-workspace {
 display: grid;
 grid-template-rows: min-content 60px auto
}

/*** workspace context pane ***/

.p-workspace--context-pane-collapsed {
 grid-template-columns: 220px auto;
 grid-template-areas: "p-workspace__banner p-workspace__banner" "p-workspace__top_nav p-workspace__top_nav" "p-workspace__sidebar p-workspace__primary_view"
}

.p-workspace--context-pane-expanded {
 grid-template-columns: 220px auto 312px;
 grid-template-areas: "p-workspace__banner p-workspace__banner p-workspace__banner" "p-workspace__top_nav p-workspace__top_nav p-workspace__top_nav" "p-workspace__sidebar p-workspace__primary_view p-workspace__secondary_view"
}

@media screen and (min-width:1440px) {
 .p-workspace--context-pane-expanded {
  grid-template-columns: 220px auto 492px
 }
}

@media screen and (max-width:1440px) {
 .p-workspace--context-pane-expanded {
  grid-template-columns: 220px auto 442px
 }
}

@media screen and (max-width:1366px) {
 .p-workspace--context-pane-expanded {
  grid-template-columns: 220px auto 392px
 }
}

@media screen and (max-width:1279px) {
 .p-workspace--context-pane-expanded {
  grid-template-columns: 220px auto 367px
 }
}

@media screen and (max-width:1070px) {
 .p-workspace--context-pane-expanded {
  grid-template-columns: 220px auto 337px
 }
}

@media screen and (max-width:860px) {
 .p-workspace--context-pane-expanded {
  grid-template-columns: 220px auto 312px
 }
}

/************ banner ************/

.p-workspace__banner {
 grid-area: p-workspace__banner;
}

/************ top nav ************/

.p-workspace__top_nav {
 background: #1abc9c;
 grid-area: p-workspace__top_nav;
 min-width: 0;
}

/************ classic nav ************/

.p-classic_nav {
 width: 100%;
 height: 100%;
 display: flex;
 flex-direction: row;
 align-items: flex-start;
}

/************ team header ************/

.p-classic_nav__team_header {
 background: #2ecc71;
}

.p-classic_nav__team_header {
 flex-shrink: 0;
 width: 220px;
 height: 60px;
}

/************ channel header ************/

.p-classic_nav__channel_header {
 background: #9b59b6;
 display: flex;
 flex: 1;
 height: 60px;
 min-width: 0;
 position: relative;
      z-index: 1;
}

/************ right header ************/

.p-classic_nav__right_header {
 flex-shrink: 0;
 height: 60px;
 display: flex;
 align-items: center;
}

@media screen and (min-width:1440px) {
 .p-classic_nav__right_header {
  width: 415px
 }
 .p-classic_nav__right_header--context_pane {
  width: 492px
 }
}

@media screen and (max-width:1440px) {
 .p-classic_nav__right_header {
  width: 365px
 }
 .p-classic_nav__right_header--context_pane {
  width: 442px
 }
}

@media screen and (max-width:1366px) {
 .p-classic_nav__right_header {
  width: 315px
 }
 .p-classic_nav__right_header--context_pane {
  width: 392px
 }
}

@media screen and (max-width:1279px) {
 .p-classic_nav__right_header {
  width: 300px
 }
 .p-classic_nav__right_header--context_pane {
  width: 367px
 }
}

@media screen and (max-width:1070px) {
 .p-classic_nav__right_header {
  width: 280px
 }
 .p-classic_nav__right_header--context_pane {
  width: 337px
 }
}

@media screen and (max-width:860px) {
 .p-classic_nav__right_header {
  width: 250px
 }
 .p-classic_nav__right_header--context_pane {
  width: 312px
 }
}

/************ side bar ************/

.p-workspace__sidebar {
 grid-area: p-workspace__sidebar;
 display: grid;
 grid-template-columns: auto;
 position: relative;
}

.p-workspace--classic-nav .p-workspace__sidebar {
 grid-template-areas: "p-workspace__channel_sidebar";
 grid-template-rows: auto;
}

.p-workspace__channel_sidebar {
 grid-area: p-workspace__channel_sidebar;
}

.p-channel_sidebar {
 background: #34495e;
 width: 220px;
 flex: 1;
 height: 100%;
 position: relative;
 padding: 0;
 display: flex;
 flex-direction: column;
}

.p-channel_sidebar__navigation_bar {
 background: #f1c40f;
}

.p-channel_sidebar__list {
 flex: 1 1 auto;
 overflow-y: auto;
 height: 0;
}

/************ common ************/

.p-workspace, .p-workspace__primary_view, .p-workspace__primary_view_contents, .p-workspace__secondary_view {
 min-width: 0;
 min-height: 0;
}

/************ primary view ************/

.p-workspace--classic-nav .p-workspace__primary_view {
 grid-template-areas: "p-workspace__primary_view_contents";
 grid-template-rows: auto;
}

.p-workspace__primary_view {
 grid-area: p-workspace__primary_view;
 margin-top: -60px;
 grid-template-columns: auto;
 background: #e67e22;
}

.p-workspace__primary_view_contents {
 display: flex;
 flex-direction: column;
 grid-area: p-workspace__primary_view_contents;
}

.p-file_drag_drop__container {
 display: flex;
 flex-direction: column;
 position: relative;
 height: 100%;
 background: red;
}

.p-message_pane {
 background: #3498db;
 flex: auto;
 position: relative;
 display: flex;
 flex-direction: column;
 overflow-y: visible;
 overflow-x: visible;
}

.workspace__primary_view_footer {
 background: #bdc3c7;
}

/* sticky */

.c-virtual_list__item--sticky {
 position: sticky;
 top: -21px;
 z-index: 200;
}

.c-message_list__day_divider__label__pill {
 background:  white;
 display: inline-block;
 z-index: 201;
 padding: .25rem .75rem;
 border-radius: 24px;
 position: relative;
 color: black;
}


/************ secondary view ************/

.p-workspace--classic-nav .p-workspace__secondary_view {
 grid-template-areas: "p-workspace__secondary_view_contents";
 grid-template-rows: auto;
 background: #e74c3c;
}
.p-workspace__primary_view_contents {
    display: flex;
    flex-direction: column;
    grid-area: p-workspace__primary_view_contents;
    overflow-y: scroll;
    z-index: 11;
    margin-top: -60px;
    padding-top: 59px;
    height: 100%;
}

<html>

<head>
 <title>Slack</title>
 <link href="https://a.slack-edge.com/bv1-8-8cacda2/slack-icons-v2-71d3b78.woff2" rel="preload" as="font" crossorigin="anonymous">
 <link href="https://a.slack-edge.com/bv1-8-8cacda2/lato-regular-d9ce515.woff2" rel="preload" as="font" crossorigin="anonymous">
 <link href="https://a.slack-edge.com/bv1-8-8cacda2/lato-black-b64f5e4.woff2" rel="preload" as="font" crossorigin="anonymous">
 <link href="https://a.slack-edge.com/bv1-8-8cacda2/lato-bold-4b1dc11.woff2" rel="preload" as="font" crossorigin="anonymous">
 <link rel="stylesheet" href="./styles.css">
</head>

<body class="sk-client-theme--dark">
 <div class="p-client_container">
  <div class="p-client">
   <div class="p-workspace p-workspace--context-pane-expanded p-workspace--classic-nav">
    <div class="p-workspace__banner"></div>

    <div class="p-workspace__top_nav">
     <div class="p-classic_nav">
      <div class="p-classic_nav__team_header"></div>

      

      <div class="p-classic_nav__right_header p-classic_nav__right_header--context_pane"></div>
     </div>
    </div>

    <div class="p-workspace__sidebar">
     <nav class="p-channel_sidebar p-channel_sidebar--classic_nav">
      <div class="p-channel_sidebar__navigation_bar">Navigation</div>

      <div class="p-channel_sidebar__list">
       <span>sidebar content first<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content<br></span><span>sidebar content last<br></span>
      </div>
     </nav>
    </div>

    <div class="p-workspace__primary_view">
                  <div class="p-classic_nav__channel_header p-classic_nav__model_header"></div>
     <div class="p-workspace__primary_view_contents">
      <div class="p-file_drag_drop__container">
       <div class="p-message_pane p-message_pane--classic-nav">
        <div class="c-virtual_list__item">
         <span>Primary View Content 1<br></span><span>Primary View Content<br></span>
        </div>

        <div class="c-virtual_list__item--sticky c-virtual_list__item" id="1572872400000.GLQ5WA3J7">
         <div class="c-message_list__day_divider__label">
          <div class="c-message_list__day_divider__label__pill">Sticky 1</div>
         </div>
        </div>

        <div class="c-virtual_list__item">
         <span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span>
        </div>

        <div class="c-virtual_list__item--sticky c-virtual_list__item" id="1572872400000.GLQ5WA3J7">
         <div class="c-message_list__day_divider__label">
          <div class="c-message_list__day_divider__label__pill">Sticky 2</div>
         </div>
        </div>

        <div class="c-virtual_list__item">
         <span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content Last<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content<br></span><span>Primary View Content Last<br></span>
        </div>
       </div>

       <footer class="workspace__primary_view_footer">Footer1<br>Footer2</footer>
      </div>
     </div>
    </div>

    <div class="p-workspace__secondary_view"></div>
   </div>
  </div>
 </div>
</body>

</html>

@Anindha Did this solved your problem if yes please accept it as an answer to help others :) — Awais, Feb 18 '20 at 09:56
The scroll bar extends into the header so not quite 100% yet. — Anindha, Feb 18 '20 at 22:27

Sticky Header Like Slack

1 Answers1