Navigasi Fixed Ketika di Scrool - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Navigasi Fixed Ketika di Scrool, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel jQuery, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Navigasi Fixed Ketika di Scrool
link : Navigasi Fixed Ketika di Scrool

Baca juga


Navigasi Fixed Ketika di Scrool

 Kali ini kita akan membuat menu navigasi yang akan otomatis fixed ketika di scrool. Tidak terlalu rumit kok. Cuma beberapa baris JavaScript menggunakan jQuery. Baiklah, mari kita mulai.


Pertama, kita buat halamannya.

<!doctype html>
<html>
<head>
 <title>nav-fixed-scrool</title>
 <link rel="stylesheet" type="text/css" href="style.css">
 <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
</head>
<body>
 <header id="menu1">
  <h1>Ini Header</h1>
 </header>
 <nav>
  <ul>
   <a href="#menu1"><li>Home</li></a>
   <a href="#menu2"><li>Portofolio</li></a>
   <a href="#menu3"><li>Tentang Kami</li></a>
   <a href="#menu4"><li>Hubungi Kami</li></a>
  </ul>
 </nav>
 <section>
  <article id="menu2">
   <h1>Portofolio</h1>
  </article>
  <article id="menu3">
   <h1>Tentang Kami</h1>
  </article>
  <article id="menu4">
   <h1>Hubungi Kami</h1>
  </article>
 </section>
</body>
</html>
Untuk jQuery-nya bisa di download di sini. Nanti muncul halaman, terus di-SaveAs.

Lalu buat file css di folder yang sama dengan html tadi. Nama file css-nya style.css

body *{margin:0px;}
header{
 width: 100%;
 height: 250px;
 background-color: orange;
}
nav{
 position: absolute;
 width: 100%;
 height: 50px;
 background-color: #333;
}
nav a{
 display: inline-block;
 padding-right: 20px;
 text-decoration: none;
 font-size: 14pt;
 cursor: pointer;
 color: #fff;
}
nav a:hover{
 color:  orange;
}
article{
 padding-top: 50px;
 width: 100%;
 height: 500px;
 background-color: orange;
 border-top: 5px solid #333;
}
Yang terakhir, tambahkan script berikut di atas tag </head>.


<script type="text/javascript">
 $(document).ready(function(){
  $(window).scroll(function(){
    var y = $(window).scrollTop();
    if (y>=250){
     $("nav").css({
      "position":"fixed",
      "top":"0px"
     });
    }else{
     $("nav").css({
      "position":"absolute",
      "top":"250px"
     });
    };
  });
 });
 </script>
Selesai...

Untuk yang butuh source code-nya, bisa di download 


Demikianlah Artikel Navigasi Fixed Ketika di Scrool

Sekianlah artikel Navigasi Fixed Ketika di Scrool kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Navigasi Fixed Ketika di Scrool dengan alamat link https://dev-create.blogspot.com/2023/08/navigasi-fixed-ketika-di-scrool_23.html