Membuat Header Melayang pada Konten Tertentu

Membuat Header Melayang pada Konten Tertentu – Hallo semuanya, pemilihan user experience (UX) saat ini sudah sangat penting untuk dipertimbangkan, banyak factor yang menjadi penilaian bagi sebuah website atau aplikasi yang memiliki UX yang baik, tentu kali ini kita akan membahas juga tentang bagaimana cara membuat header melayang pada konten tertentu, karena banyak sekali ketika kita sudah berhubungan dengan data yang sangat banyak maka kita membutuhkan header atau judul untuk tetap terlihat meski kita sedang melakukan scroll ke data yang ada di bawah.

Baiklah untuk itu kita langsung saja ikuti baris kode berikut untuk membuat struktur sederhana yang kita perlukan.

<!-- tabel dengan banyak data -->

  <table class="float-area">

    <thead>

      <tr class="float-header">

        <th>header kolom 1</th>

        <th>header kolom 2</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>table1 data1</td>

        <td>table1 data1</td>

      </tr>

      ...

      <!--  tambahkan data lebih banyak lagi  -->

    </tbody>

  </table>

 

 

<!-- kotak div standard -->

  <section class="some-other-area float-area">

    <h2 class="float-header">Judul</h2>

            <p>content</p>

            ...

            <!--  tambahkan data lebih banyak lagi  -->

  </section>

 

 

Style untu CSS yang kita butuhkan seperti di bawah ini

.floatingHeader {

  position: fixed;

  top: 0;

  visibility: hidden;

}

 

#page-wrap {

  width: 500px;

  margin: 100px auto;

}

.spacer {

  height: 600px;

}

table {

  border-collapse: collapse;

}

th {

  background-color: lightgrey;

  padding: 10px;

  width: 200px;

  text-align: left;

}

tr:nth-child(odd) {

  background: #eee;

}

td {

  padding: 10px;

  width: 200px;

}

 

.some-other-area {

  margin: 300px 0;

  line-height: 2;

}

h2 {

  background: lightgrey;

  padding: 10px;

  font: 28px Georgia, Serif;

  margin: 0 0 20px 0;

}

 

Jika sudah, maka kita akan membuat fungsi dengan jquery menggunakan kode seperti dibawah ini

function UpdateTableHeaders() {

  $(".float-area").each(function() {

    var el = $(this),

      offset = el.offset(),

      scrollTop = $(window).scrollTop(),

      floatingHeader = $(".floatingHeader", this);

 

    if (scrollTop > offset.top && scrollTop < offset.top + el.height()) {

      floatingHeader.css({

        visibility: "visible"

      });

    } else {

      floatingHeader.css({

        visibility: "hidden"

      });

    }

  });

}

 

$(function() {

  var clonedHeaderRow;

 

  $(".float-area").each(function() {

    clonedHeaderRow = $(".float-header", this);

    clonedHeaderRow

      .before(clonedHeaderRow.clone())

      .css("width", clonedHeaderRow.width())

      .addClass("floatingHeader");

  });

 

  $(window)

    .scroll(UpdateTableHeaders)

    .trigger("scroll");

});

 

Pada kode jquery diatas kita menggunakan addClass dengan memanfaatkan class floatingHeader yang sudah kita buat sebelumnya.

Demikian artikel tentang membuat header melayang pada konten tertentu. Untuk lebih jelasnya kalian bisa lihat demo berikut.

 

See the Pen Header Melayang by Dumet_School (@dumet_school) on CodePen.

21 Januari 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat