Html Question posted in
Some basic documentation can be found here.

Html – How can I make multiple element sticky next to each other?

I’m attempting a scenario where one header will be sticky, followed by a subheader which is sticky, and then followed by a table header.

In this setup, I want the .first class to become sticky upon scrolling, the .second class to scroll, the .third class to become sticky after the first class, and finally, the table header to become sticky after the second class. Please review the code I’m working with.

Thanks in advanced for trying to help me.

.content {
  max-height: calc(100vh - 20px);
  /* Example height, adjust as needed */
  overflow-y: auto;
  /* Add vertical scrollbar if needed */
}

.table-container {
  position: relative;
  /* Ensure relative positioning for the sticky header */
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background-color: #f1f1f1;
  /* Example background color */
  position: sticky;
  top: 75;
  z-index: 3;
  /* Ensure the headers are above the table content */
}

th {
  position: sticky;
  top: 75;
}

tbody tr:nth-child(even) {
  background-color: #f2f2f2;
  /* Example alternating row color */
}

.first {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 25px;
}

.third {
  position: sticky;
  top: 25;
  z-index: 2;
  height: 25px;
}
<div class="content">
  <p class="first">I am first sticky </p>
  <p class="second"> I am not sticky </p>
  <p class="third"> I am second sticky </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet tincidunt lorem. Nulla facilisi. Duis et tellus ut nulla facilisis fermentum. Aliquam volutpat, risus eget eleifend fringilla, leo mauris vestibulum libero, id vehicula odio
    elit et lorem. Morbi lacinia tristique justo a consectetur. Aliquam tempus urna vitae enim faucibus, vitae ultrices risus fermentum. Proin rutrum, nunc sed pellentesque congue, tortor neque hendrerit mi, ac ultricies dui nisl vel metus. Fusce auctor
    dolor ut odio accumsan, non ultricies lacus sodales.
  </p>
  <p>
    Sed sed nisi at tortor ultricies hendrerit nec quis elit. Vivamus malesuada tellus nec dui viverra, nec fermentum dolor scelerisque. Donec dignissim mi vitae nisi fermentum fringilla. Sed ut lorem neque. Proin vestibulum, velit ut fringilla auctor, velit
    dui dapibus arcu, eget aliquam nisi arcu non dui. Mauris malesuada purus vitae sollicitudin fermentum. Nulla facilisi. Ut vel metus quis justo pellentesque feugiat vitae ut felis. Curabitur condimentum orci sit amet diam eleifend, ut luctus lorem
    dapibus.
  </p>
  <!-- Add more paragraphs as needed -->

  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
          <th>Header 3</th>
        </tr>
      </thead>
      <tbody>
        <!-- Add 100 rows -->
        <!-- Example: -->
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <!-- Repeat this row 100 times -->
        <!-- You can use JavaScript to generate these rows dynamically -->
        <!-- For simplicity, I'll copy this row 99 times -->
        <!-- Start copying from here -->
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        <!-- Repeat this row 99 times -->
        <!-- End copying here -->
      </tbody>
    </table>
  </div>
</div>
Tags:

2

Answers


  1. 0

    Here is what you need to do:

    .content {
    max-height: calc(100vh - 20px);
    overflow-y: auto; 
  }

  .table-container {
    position: relative;
  }

  table {
    width: 100%;
    border-collapse: collapse;
  }

  thead {
    background-color: #f1f1f1; /* Example background color */
    position: sticky;
    top: 75px;
    z-index: 3; /* Ensure the headers are above the table content */
  }

  th {
    position: sticky;
    top: 75px;
  }

  tbody tr:nth-child(even) {
    background-color: #f2f2f2;
  }

  .first {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: white; /* Add background to avoid overlap issues */
    height: 25px;
    padding: 5px;
  }

  .third {
    position: sticky;
    top: 25px;
    z-index: 2;
    background-color: white; /* Add background to avoid overlap issues */
    height: 25px;
    padding: 5px;
  }

  .second {
    height: 25px;
    padding: 5px;
  }
    Login or Signup to reply.
  2. 0 
    *{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0px;
  padding: 0px;
}
.sticky1{
  position: sticky;
  top: 0px;
  font-size: 30px;
  color: blue;
  background-color: plum;
  font-weight: 600;
}
.sticky2{
  position: sticky;
  top: 42px;
  font-size: 30px;
  color: navy;
  font-weight: 600;
  background-color: plum;
}
.non-sticky{
  margin: 20px 20px;
}
.contant{
  margin-top: 20px;
}
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>position</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="sticky1">
        I am sticky
    </div>
    <div class="non-sticky">
        I am non-sticky
    </div>
    <div class="sticky2">
        I am also sticky
    </div>
    <div class="contant">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae, dolores veritatis vel saepe error tempore
        eveniet nihil expedita ipsam excepturi fugit fugiat sequi dignissimos molestiae necessitatibus atque possimus
        impedit inventore!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium eveniet incidunt voluptatem, dolorum ad,
        maiores iusto ullam ex delectus dolores quo officia itaque tempore sit commodi officiis earum fugiat, fuga
        harum! Aspernatur fuga deserunt voluptate quas mollitia aut incidunt odio excepturi nostrum veniam, architecto
        facere unde dolor earum placeat nam quae minima ipsa autem illo, sed ex? Incidunt, veritatis? Aspernatur unde
        quis aperiam veniam aliquam enim eos alias quaerat laudantium quae magni repudiandae a ratione odio eligendi
        libero inventore, impedit explicabo iure culpa molestias. Nemo fugit dolorem repellendus nostrum quasi deleniti
        nam. Autem nemo distinctio ea quidem inventore cupiditate voluptatum expedita nulla ad molestias! Ullam
        reiciendis quam, fugiat blanditiis neque similique ducimus alias odio quidem soluta repudiandae voluptas vero
        veritatis. Eaque, ut. Similique sint qui pariatur quae itaque facilis sunt explicabo, reprehenderit optio
        voluptas nostrum ullam dolorem sequi iusto ducimus! Quidem nam eum officia dicta iure eligendi voluptas vel
        nihil deleniti, alias consequuntur odit magni quae, aut harum minus ullam inventore quisquam debitis doloribus.
        Reprehenderit nisi voluptatum natus inventore architecto velit consequatur eaque mollitia molestias deserunt
        iste harum odio aliquid id asperiores magnam, aspernatur cupiditate, tempore libero quasi quae? Nostrum nemo
        quis obcaecati. Porro assumenda voluptate ut impedit dignissimos repellat magnam nulla similique autem ipsam
        reiciendis illo natus dolor temporibus hic accusantium vel tempora, officia atque suscipit fugit quibusdam eius.
        Exercitationem placeat dolorum corporis optio? Earum consequatur sunt delectus laborum velit illum vel
        molestiae, exercitationem, dolor nihil maiores impedit eaque? Totam tempore harum nisi blanditiis eligendi
        cupiditate voluptate quas quia. Voluptas aut sed illum dolor architecto. Mollitia nam inventore reiciendis
        corrupti praesentium. Adipisci laboriosam nisi libero, dolorum, corrupti a blanditiis odio modi officiis illum
        deleniti voluptatibus exercitationem repellat labore minus. Quia adipisci tempore vero hic placeat praesentium
        nihil atque, aut delectus eligendi! Inventore a numquam perspiciatis? Iste officia fuga, nam optio inventore
        quisquam odio molestiae ab impedit doloribus quia incidunt. Sequi beatae minus voluptas eos quae minima nemo,
        iste repellat optio suscipit quia sunt sed temporibus in, mollitia doloribus facilis necessitatibus quam
        veritatis, cum ab delectus? Assumenda eligendi odio deleniti architecto provident dolorum? Accusamus animi at
        necessitatibus aperiam quos dignissimos nulla error tempore consequuntur aliquid sunt quo, ducimus nisi
        explicabo vero ab? Numquam incidunt esse natus non fugiat? Reprehenderit molestiae accusantium mollitia quam
        beatae facere harum possimus tenetur quod voluptatum nam aperiam dignissimos, quos, perferendis non, iusto earum
        tempora. Voluptatibus facere tenetur perferendis amet aliquam animi officiis. Commodi atque architecto facere
        nam! Quos cumque doloribus perferendis rerum quam veniam ad, quis optio harum nesciunt maxime ipsa, beatae quia
        voluptates nostrum repudiandae repellendus totam deleniti repellat maiores sequi cum dolorem mollitia sapiente.
        Consectetur, similique sequi. Id quam ea fugiat, ullam debitis quibusdam nulla ratione illo provident molestias
        enim aperiam ut hic eveniet esse assumenda explicabo dignissimos rem beatae at vero officia voluptatem. Earum
        aspernatur quasi cum provident, laudantium nam consequuntur suscipit error. Corporis sequi libero illum ad.
        Distinctio quas, aspernatur explicabo similique nobis recusandae provident velit praesentium! Tempore quod ullam
        laboriosam harum deserunt fugit ut necessitatibus deleniti eligendi dolores corrupti eaque aut quo saepe ratione
        libero ad ipsam, voluptatibus modi? Mollitia veniam fuga libero a ipsam aliquid laudantium necessitatibus, quam
        nemo ab quia dolore eaque maiores! Itaque, est eum commodi animi officia a vitae facere nostrum nulla rerum
        atque labore sint ea aspernatur eligendi aut alias quaerat enim? Ratione similique velit dolore dignissimos
        adipisci nisi accusantium, doloremque alias laudantium non, libero illo natus aliquam fuga distinctio,
        praesentium veniam nam exercitationem soluta officiis tenetur. Ipsum officiis ad modi dignissimos molestiae ut
        assumenda quia delectus consectetur necessitatibus mollitia accusantium reprehenderit nam sequi impedit,
        explicabo veniam architecto in blanditiis incidunt omnis consequatur temporibus commodi. Praesentium vitae eos
        distinctio a doloribus perferendis, aut ad quia aliquid provident, cum iusto blanditiis officiis deleniti autem
        eaque cumque quis sapiente alias. Numquam, possimus. Commodi suscipit voluptatibus laudantium omnis deserunt
        cumque blanditiis possimus nulla maxime rerum saepe deleniti reiciendis soluta, molestias ut! Minima omnis sunt,
        culpa ipsa laudantium blanditiis enim tempore libero cum molestias alias aperiam deleniti aliquam quas nulla ea
        rerum nam cumque accusantium excepturi placeat accusamus dolor. Beatae officiis voluptate quos qui at fuga enim,
        exercitationem commodi neque odit delectus, dolorum sit aspernatur dignissimos molestias vel eligendi ipsam.
        Laudantium expedita neque pariatur, ullam perspiciatis illo mollitia doloremque nemo, iusto, quo veniam commodi
        sed numquam aspernatur debitis. Voluptatibus blanditiis esse voluptates nisi laborum? Quibusdam eum, saepe qui
        inventore aut aliquam sed veniam obcaecati! Autem similique deleniti laboriosam quos eos repellat iusto! Commodi
        nesciunt animi sed beatae hic quasi deserunt neque officia rerum, deleniti, quas sapiente. Ullam, vero neque
        magnam ratione, quaerat rerum accusantium harum ut debitis, blanditiis labore. Sequi quod tenetur modi
        doloremque amet id, rem quos repellendus consequatur reiciendis eligendi odit voluptas dolor natus vero at
        aliquam sint adipisci maiores obcaecati dolores. Quam, at eius explicabo ab repellat dolorem. Facilis mollitia
        aliquid explicabo culpa in vel? Modi animi similique id velit molestiae. Nemo quas animi, consequatur veniam
        quod odit culpa officiis minus suscipit rerum unde numquam totam veritatis illum est accusamus nisi eligendi?
        Nam dolores autem culpa consequatur assumenda neque, necessitatibus magnam consectetur repellat maxime saepe!
        Libero esse assumenda, nemo debitis beatae numquam explicabo at reprehenderit laboriosam molestias odio quas
        dolores repellat sapiente autem quos veniam ad omnis perferendis. Reprehenderit itaque vero ducimus commodi
        deleniti porro, necessitatibus quas tenetur blanditiis, libero doloribus tempora, dolorum mollitia sunt alias
        laboriosam. Nulla saepe dolorem accusantium excepturi dignissimos pariatur rem nostrum dolore veniam, assumenda
        perferendis omnis quibusdam aliquam numquam ab minus explicabo a! Animi sequi deserunt maiores? Delectus
        mollitia est veniam dolor aliquid, numquam distinctio laudantium corporis nemo tempora! Eligendi, quod a facere
        excepturi molestiae assumenda tempore laudantium repellat id, ad numquam cumque quaerat. Minus laboriosam
        expedita quo optio. In, voluptatum. Modi eum velit accusantium, pariatur fuga qui veritatis maiores quam
        consequuntur illo ut vel delectus numquam quas assumenda dicta sed voluptatibus blanditiis officiis. Vitae
        deserunt optio veritatis impedit maiores doloribus asperiores rem eos quaerat quasi repudiandae eum minima, quas
        natus temporibus! Aperiam iure perspiciatis corporis excepturi ducimus, a ipsam dolor? Laborum architecto sunt
        nesciunt sint distinctio porro maiores earum est.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam magni recusandae sint alias sapiente quam
        consequatur, laboriosam debitis? Eum, harum tempora excepturi molestiae suscipit a enim voluptatibus nam
        deserunt deleniti ea consequatur placeat dolorum architecto beatae qui nihil necessitatibus incidunt numquam
        atque illum omnis reiciendis. Quas impedit corrupti delectus praesentium iusto sed dolores optio cupiditate
        ipsum distinctio vel, enim fugit ducimus magnam qui, hic sunt voluptas molestias quasi ipsa, deserunt officiis
        asperiores? Porro quo omnis suscipit dicta magnam dolores saepe nostrum harum fugit fugiat mollitia iusto enim
        obcaecati doloremque corrupti, ex laborum in quia neque rem voluptatum atque unde quasi! Voluptatibus dolorum ex
        consequuntur minus consectetur distinctio eum illum, nam error modi commodi dolor labore saepe omnis, corporis
        at, sapiente earum repudiandae nesciunt reiciendis sequi corrupti? Sed, cumque. Quos porro aliquam laborum
        adipisci ex qui dolorum, dolore odio placeat voluptatem nostrum dolor debitis, labore nihil! Commodi ratione
        beatae, praesentium, deserunt maxime dolorem consectetur laborum, minus a voluptatum vel expedita amet
        blanditiis placeat quos. Architecto est eos dignissimos illum eaque accusamus sit quia delectus nesciunt quasi
        tenetur animi, officiis optio itaque soluta minima? Illum, fugit odit dolorem qui in voluptatum similique iusto.
        Aspernatur velit cupiditate sit nostrum explicabo aperiam consequatur minima quas nihil dicta, rem nemo sint
        reiciendis nam iusto! Temporibus molestiae illo doloribus, ipsam totam dolor laudantium perspiciatis doloremque
        dignissimos delectus accusantium incidunt pariatur nihil reiciendis, laborum porro, ullam repellat magnam
        dolore? Aperiam omnis voluptate culpa libero, cupiditate reprehenderit quisquam quos saepe animi expedita
        explicabo. Unde sapiente repellat magnam sequi dignissimos in earum nemo voluptatibus, doloremque provident
        enim, et beatae similique quis autem! Tempora eos hic aliquid veritatis totam nemo temporibus! Illo voluptatum
        facere eveniet ducimus nihil perferendis reprehenderit dolorem dolores, voluptate neque laboriosam voluptatem
        fugit accusamus ex nisi! Ipsa recusandae velit autem aperiam ullam! Consequuntur atque eligendi aspernatur autem
        natus nam rerum accusamus odio veniam eum ducimus esse ipsa quidem numquam sequi dolores, alias optio molestias
        ipsum velit sit odit! Voluptas, unde ipsam, sit earum odio exercitationem omnis blanditiis architecto deleniti
        laborum rem adipisci consequuntur? Odit placeat beatae et saepe illum minima error nulla, autem corporis ullam
        dolor optio iste soluta consequatur animi qui temporibus dolorum doloremque explicabo voluptatem voluptates
        veniam. Earum sit dolores voluptatem doloremque fuga rem repellat magnam, nisi maiores laudantium omnis, qui
        rerum ab sunt dolorum? Iusto sapiente, dolorum excepturi possimus praesentium magni reiciendis vitae quos minima
        rem repellat ea est hic necessitatibus at sequi blanditiis omnis a inventore porro harum iure nostrum. Optio
        culpa minus aspernatur amet omnis, tempore, molestias sint doloribus exercitationem vitae rerum illum porro est
        aperiam qui ut animi similique ipsum repudiandae officia soluta voluptas delectus quo? Porro iusto qui iure nam
        libero voluptate officiis nulla blanditiis veritatis vero, labore quia alias distinctio explicabo tenetur
        pariatur iste reiciendis saepe quis culpa tempore, ut sapiente aperiam perspiciatis! Quos enim ea, velit,
        consectetur voluptatem unde, quas fugit minus vel nesciunt architecto? Sint nihil optio officia asperiores
        consequuntur amet cupiditate nam tempore reiciendis corporis quidem totam possimus cumque maxime, esse quibusdam
        illum veniam vel pariatur?
    </div>
</body>

</html>

    =======

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search