membuat header sticky dengan css

share

  • membuat header sticky dengan css

    Cara Membuat Header Sticky dengan CSS


    Tutorial cara membuat header sticky dengan css yaitu sebuah menu header menjadi fixed style atau tidak bergerak ketika halaman di scroll ke atas atau ke bawah, sehingga dapat mempercantik atau membuat halaman website menjadi lebih menarik.
  • membuat header sticky dengan css
    Service
    1. Complete Website
    2. Only web script
    3. Web modification
    4. Application program
    5. Free web template
    6. Free application
    7. Basic SEO
    8. Article request
    9. Tutorial programing
  • membuat header sticky dengan css
    MOTO
    "Kepuasan Pelanggan adalah Prioritas kami, Sebagai Pemicu Semangat Dalam Memberikan Pelayanan Terbaik".
  • membuat header sticky dengan css Teknologi dan Bahasa
    PHP-5, HTML-5, CSS3, SQL Server, MySQL Database, Access Database, Java, JavaScript, dan Visual Basic.
  • membuat header sticky dengan css
    VISI
    "Menjadi penyedia layanan yang terpercaya dan maju dalam dunia Teknologi Informasi."

Cara Membuat Header Sticky dengan CSS

Jika Anda sedang belajar css maka ini adalah halaman yang tepat karena akan membahas tutorial cara membuat header sticky dengan css yaitu sebuah menu header menjadi fixed style atau tidak bergerak ketika halaman di scroll. Sebagaimana kita ketahui bahwa CSS adalah sebuah kode style yang digunakan untuk mempercantik atau membuat halaman website menjadi lebih menarik, begitu juga dengan sticky header ini. Sebagai contoh dari implementasi membuat header sticky adalah pada halaman website ini, perhatikan pada header nya, tetap diam saat halalam di gulir ke atas atau ke bawah. Dan akan menjadi lebih menarik jika dipadukan dengan style header lainnya seperti floating header.

Tutorial cara membuat header sticky dengan css ini masih sangat sederhana bisa dibilang masih dasar sekali, namun dari pemahaman inilah nantinya teman-teman dapat mengembangkannya menjadi full power style. Oh iya, kalo ada yang belum paham tentang pengertian CSS dapat teman-taman pelajari di artikel berikut ini apa itu css silahkan dibaca.

Apa itu header sticky? header sticky adalah header yang selalu tetap berada pada posisinya meskipun halaman website telah di scroll ke bawah atau ke atas, jadi posisi header sticky adalah tetap atau fixed.

Berikut langkah - langkah tutorial cara membuat header sticky dengan css lengkap beserta source code style css dan penjelasannya;

Cara Membuat Header Sticky dengan CSS



Header Sticky CSS

membuat header sticky dengan css

1. Membuat Homepage

Homepage atau halaman index ini kita buat menggunakan kode HTML murni tanpa sentuhan CSS sedikitpun, meskipun sudah menggunakan link ekternal css. Hanya saja kode css belum kita buat, ini dilakukan agar belajar css kali ini lebih mudah dipahami secara struktur dasarnya. Untuk membuat homepage tersebut yang sekaligus digunakan sebagai halaman index tutorial cara membuat header sticky dengan css ini, silahakan tulis kode HTML berikut kemudian simpan pada folder tutorial.

Simpan sebagai index.html

<html>
<head>
	<title>Membuat Header Sticky dengan CSS</title>
	<link rel="stylesheet" href="style.css" media="screen">
</head>
<body>
	<div class="sticky-header">Home | About | Privacy | TOS | Contact us</div>
	<div class="content-scroll">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
		<p>Demikian pula, tidak adakah orang yang mencintai atau mengejar atau ingin mengalami penderitaan, bukan semata-mata karena penderitaan itu sendiri, tetapi karena sesekali terjadi keadaan di mana susah-payah dan penderitaan dapat memberikan kepadanya kesenangan yang besar. Sebagai contoh sederhana, siapakah di antara kita yang pernah melakukan pekerjaan fisik yang berat, selain untuk memperoleh manfaat daripadanya? Tetapi siapakah yang berhak untuk mencari kesalahan pada diri orang yang memilih untuk menikmati kesenangan yang tidak menimbulkan akibat-akibat yang mengganggu, atau orang yang menghindari penderitaan yang tidak menghasilkan kesenangan?</p>
		<p>Demikian pula, tidak adakah orang yang mencintai atau mengejar atau ingin mengalami penderitaan, bukan semata-mata karena penderitaan itu sendiri, tetapi karena sesekali terjadi keadaan di mana susah-payah dan penderitaan dapat memberikan kepadanya kesenangan yang besar</p>
	</div>
</body>
</html>

Perhatikan kode html di atas pada baris ke-4 yaitu <link rel="stylesheet" href="style.css" media="screen"> ini adalah link eksternal CSS menggunakan nilai href style.css stylesheet. Artinya kode CSS untuk membuat header sticky dibuat pada berkas stylesheet tersendiri, tidak digabungkan / inline pada kode html tersebut, dengan nama file style.css. Kemudian pada baris ke-7 dan ke-8, disana terdapat class untuk memanggil selector, dengan nama sticky-header dan content-scroll. Dimana nilai selector tersebut akan kita atur style nya di dalam berkas style.css yang akan kita buat kemudian.

Agar benar-benar paham dalam belajar cara membuat header sticky dengan css, silahkan jalankan terlebih dulu file index.html di atas pada web browser. Dipastikan tampilannya masih kaku dan sama sekali tanpa sentuhan css header sticky style sebagaimana maksud dari tutorial ini. Seperti gambar berikut;

membuat header sticky dengan css

2. Membuat File CSS Header Sticky

Untuk membuat header sticky di file css agar tampilan header di halaman web tetap dalam posisi yang diatur yaitu fixed, silahkan ketik kode CSS berikut. Kemudian simpan dalam satu folder yang sama seperti folder penyimpnan file index.html seperti pada langkah pertama.

Simpan sebagai style.css

.sticky-header {
	background-color: #ffa800;
	color: #fff;
	width:100%;
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	padding: 12px 0px 12px 20px;
	text-align:left;
	letter-spacing: 4px;
}
.content-scroll{
	height:1000px;
	padding:100px 0px 0px 50px;
}
.content-scroll p{
	padding:20px 0px 0px 20px;
}

Kode CSS di atas merupakan akhir dari turorial cara membuat header sticky dengan css kali ini yang masih sangat dasar dan sederhana. Kode di atas adalah kode style CSS dimana selector berikut properties dan value nya telah kita panggil sebagai eksternal css di file index.html sebagaimana telah di jelaskan pada langkah pertama. Dan jika kita jalankan kembali file index.html maka pada web browser akan menampilkan model halaman yang berbeda, menjadi lebih menarik karena telah memiliki style header sticky. Berikut adalah tampilannya;

membuat header sticky dengan css

Inti dari tutorial cara membuat header sticky dengan css atau komponen kode css yang mengatur agar header memiliki style ini adalah pada baris kode css berikut ini.

.sticky-header {
	position: fixed;
}

Tutorial Cara Membuat Header Sticky dengan CSS

Sekian penjelasan sederhana dari kami tentang bagaimana cara membuat header sticky dengan css sehingga posisi header menjadi tetap atau tidak bergerak saat halaman web di scroll. Untuk mendapatkan source code nya Anda dapat langsung saja copas dari sumber kode di atas, jika tidak dapat dicopas atau error mohon hubungi kami melalui SMS atau email atau melalui form komentar dan obrolan. Semoga dapat membantu.

Baca juga :


Cara Membuat Header Sticky dengan CSS

Tags: cara membuat header sticky, membuat header sticky, header sticky css, header sticky, membuat header sticky dengan css


Reliable

membuat header sticky dengan css

Advertise

jasa pasang iklan murah

Payment & Donation

membuat header sticky dengan css

Rekening BCA : 343 1156 006

a/n : Andi Hatmoko

Rekening MANDIRI : 13300 11921 079

a/n : Andi Hatmoko

membuat header sticky dengan css

Account :

andihatmoko@gmail.com

Live Chat

yulius 2020-11-20, 15:04 pm
saya berminat dengan aplikasi ini
ISRA2020-11-18, 09:02 am
Berapa harga aplikasi sppd nya???
Arif Wibowo2020-11-16, 09:57 am
Harga aplikasinya berapa ?
amrullah2020-11-12, 07:55 am
harga aplikasi data pegawai honerer ?
Samuel2020-11-02, 09:49 am
Saya mau aplikasi SPPD, gmna cara sy beli aplikasix dan harganya berapa?
Kornelis Pan2020-10-30, 19:09 pm
bagamna cara download aplikasinya kaka
MARTHIN JEKS2020-10-30, 00:53 am
hai, bagaimana saya ingin mendownload aplikasi yang kalian sediahkan , apakah saya harus membayar atau membeli aplikasi
panzer2020-10-29, 12:16 pm
harga sppd online berapa gan??
riduwan2020-10-21, 07:48 am
mau tanya, edit web server biar patent dan recomended bisa ga?
chandra2020-10-21, 07:19 am
gimana cara download yg free source code ?
Lodowik Djan2020-10-20, 21:20 pm
Berapa harga aplikasi SIMPEG
iwan2020-10-18, 21:41 pm
harga progamnya berapa ya
yopi2020-10-16, 12:02 pm
gimana cara download aplikasi ini
akhmad ramad2020-10-07, 02:50 am
Apakah bisa membuat Aplikasi Deteksi Tingkat Kemiripan Judul Berbasis Web Metode Winnwoing_ ??
imadebudiyas2020-10-06, 10:21 am
untuk aplikasi sipas berapa harganya
sarpas2020-09-28, 14:37 pm
berapa harga untuk aplikasi arsip kantor v4?
Lukman2020-09-22, 11:53 am
Mau Tanya Harga Program Aplikasi Inventory Barang Gudang brapa_ ?
Agustina Ndj2020-09-18, 09:51 am
download aplikasi sarpras sekolah
Aloisius Rab2020-09-17, 22:15 pm
Aplikasi Pengajuan Kredit dan Analisa 5C
data2020-09-13, 10:50 am
tolong bisa bantu program aplikasi barang
sutan arif p2020-09-09, 10:13 am
berapa harga source code program pengarsipan?
kumbaray2020-09-09, 02:46 am
untuk aplikasi spj_ sppd nya berapa kisarannya gan
Yance Rawar2020-09-01, 17:10 pm
Boleh saya bertanya ya?_ berapa biaya aplikasi LPJ Dana Desa_ Mohon tanggapannya ya?
ZAI2020-08-30, 06:18 am
brp harga aplikasi input data karyawan
Juned2020-08-23, 11:30 am
Gimana kalo make delete di mysqli nya??
Mukhlis2020-08-18, 10:42 am
Aplikasi Indekx Kepuasan Masyarakat nya ada bg?
Tedi2020-08-15, 20:41 pm
Selamat malam para pakar
arif2020-08-13, 14:36 pm
Program Aplikasi Rental Online Untuk Halaman Member Depannya tidak ada hanya Halaman Login Untuk admin dan Super admin
secret2020-08-10, 14:59 pm
ada free source code yang bgagus gak ?
aan2020-08-05, 14:20 pm
kl mau mendapatkan sourcecode aplikasi SPPD gimana ya?? bisa minta wa nya
SHODIKIN2020-07-26, 06:16 am
Berapa Donasi Program Aplikasi Penjualan Berbasis Web? Tq
MICHAEL ELSO2020-07-23, 18:34 pm
Apakah pembelian aplikasi ktp sudah termasuk datanya smua? Atau hanya aplikasinya saja? Misalnya mau untuk cek data bs?
April2020-07-21, 13:54 pm
saya ingin membuat aplikasi arsip digital untuk internal perusahaan yg dengan mudah dapat di akses bagi seluruh karyawan
Salwa2020-07-20, 13:07 pm
Berapa lama kira2 pesan aplikasi untuk perpustakaan sekolah?
udin2020-07-19, 21:44 pm
berapa harga aplikasi untuk pondok pesantren
Royke Lantup2020-07-17, 20:07 pm
Setelah di download langkah_ langkahnya seperti apa?
Feria2020-07-10, 16:50 pm
Untuk aplikasi penyimpanan berkas pengajuan administrasi capil, KK dan KTP berapa biaya nya ??
Asep Gunawan2020-07-08, 09:50 am
Mau tanya versi Full Aplikasi stok barang
Iwan2020-07-08, 09:40 am
Berapa harga Program Aplikasi Manajemen Anggota
ferry 2020-06-24, 13:51 pm
apakah saya bisa mendapatkan aplikasi SPPD exel sederhana
Shany2020-06-19, 20:43 pm
Untuk aplikasi persediaan ini apakah masih bisa di customize dengan warna dan ukuran?
fadhil2020-06-17, 09:53 am
bisakan anda mengirimkan penawaran ke email saya tentang program aplikasi e_ arsip dan data pegawai
aa2020-06-08, 11:11 am
brp harga untuk aplikasi Program Aplikasi Inventory Barang Gudang
Budhi Dwipa2020-06-08, 10:48 am
halo admin saya tertarik dengan aplikasi simpeg 7 apakah ada nomor wa yg bisa dihubungi ?
abu hafidz2020-06-04, 14:23 pm
kalau untuk menampilkan hanya data yang ada di table lain gimana ya ? mohon bantuannya
Muhlis2020-06-04, 12:09 pm
saya berminat software pengajuan judul skripsi, saya ingin membahas harganya jida chat ini di respon ke Email
nic2020-06-04, 07:49 am
brp harga e_ arsip
NUR CAHYANIG2020-06-03, 15:20 pm
Berapa harga untuk software koperasi?
mugiarto2020-05-09, 08:33 am
bgmana cara beli program iin, apakah termasuk souce code nya ??
willbertus2020-04-28, 16:49 pm
Admin mohon info utk Aplikasi Dokumen Kantor gimana cara dapatnya secara komplit_ Minat_ thks
Galih2020-04-27, 23:18 pm
Min, bagaimana cara mendapatkan source code aplikasi cuti?
Aris2020-04-12, 08:45 am
plikasi Arsip Surat Berbasis Web SIPAS harganya brp?dpt source code y
Wida Widiyaw2020-04-11, 12:01 pm
Ingin Mengubah Tanggal Lahir Akun Google
Zulfikri2020-04-10, 10:33 am
Mau tanya biayanya berapa kalau bikin aplikasi SPPD lengkap
irfan2020-03-14, 10:18 am
selamat pagi pak,apa program sewa mobil ini bisa castem sesuai dengan kebutuhan kami
Hamdan2020-03-09, 16:05 pm
Berapa harga membuat aplikasi rental atau penyewaan kamera berbasis web?
rizki firman2020-02-25, 12:05 pm
mau tanya untuk spk metode fuzzy berapa ya? tentang pemilihan tempat wisata
Rendhi roman2020-02-13, 22:38 pm
Untuk Sistem Rekrutment BIsa_
windra2020-02-13, 14:43 pm
untuk harga program data karyawan brp
hendi 2020-01-25, 18:59 pm
untuk afk sofware developer property penjualan di harga berapa _
Suwarto plaz2020-01-21, 15:45 pm
berapa harga aplikasi cuti online?

Post your chat:


Name



Email



Chat



Confirm you are NOT a spammer

 
membuat header sticky dengan css