Masalah tampilan tidak lepas dari yang namanya user experience dan user interface. Keduanya adalah elemen yang harus kalian pahami jika ingin menjadi seorang web developer. Karena dua hal tersebut saling berkaitan dan memiliki hubungan erat untuk memberikan pelayanan terbaik bagi pengunjung website kalian. Dengan user experience kita akan belajar memahami tingkah laku seorang saat mengunjungi website kita. Sedangkan user interface untuk memberikan tampilan yang menarik dan tidak membuat bosan.
Maka dari itu kalian harus mengeksplor dua hal tersebut. Seperti pembahasan kali ini kita akan belajar membuat menu fixed saat scroll dengan Jquery. Lalu apa hubunganya dengan 2 hal yang sudah kita sebutkan sebelumnya ?. Hubunganya adalah kita akan belajar membuat website kita menjadi website yang nyaman dan memiliki interaksi dengan pengunjung sehingga akan berdampak positif ketika kita berhasil memberikan website dengan tata cari yang baik.
Menu fixed ini sebenarnya adalah hal yang umum. Contoh yang mungkin kalian sering lihat adalah pada menu seperti facebook atau twitter. Mereka mempunyai menu yang tetap diatas walaupun kalian telah men-scroll jauh kebawah. Tapi pada contoh pembahasan kali ini kita buat tidak seperti itu, melainkan menu yang kita buat akan berubah menjadi fixed saat kita sudah men-scroll kebawah.
Agar tidak bingun kalian bisa coba ikuti contoh code dibawah ini ya. Buat file HTML seperti ini.
scroll.html
<html>
<head>
<meta charset="UTF-8">
<title>scroll</title>
<style>
body {
padding: 0;
margin: 0
}
header {
background: transparent url('gambar kalian bebas') 0 0;
height: 100px;
}
h4 {
font-weight: bold;
}
p {
margin: 20px 0;
}
section {
padding: 20px 0;
}
.wrapper {
width: 400px;
margin: 0 auto;
position: relative;
padding: 28px 0 0 0;
}
nav {
position: absolute;
left: 0;
right; 0;
top: 100px;
background: green;
display: block;
width: 100%;
padding: 4px 0;
height: 30px;
z-index: 100;
}
nav a {
font-family: helvetica;
color: #ffffff;
padding: 2px; 4px;
display: block;
float: left;
text-decoration: none;
margin-right: 4px;
}
nav a:hover,
nav a.active {
background: white;
color: green
}
.fixed {
position: fixed;
top: 0
}
</style>
</head>
<body>
<header></header>
<nav>
<a href="#" data-scroll="top">TOP</a>
<a href="#" data-scroll="news">NEWS</a>
<a href="#" data-scroll="products">PRODUCTS</a>
<a href="#" data-scroll="contact">CONTACT</a>
</nav>
<div class="wrapper">
<section id="top" data-anchor="top">
<h4>TOP</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat eleifend orci, eget aliquam dolor elementum vel. Aliquam eu nulla eros, et tincidunt felis. Pellentesque congue sodales eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla suscipit nulla vel nisi fermentum ultricies. Integer ligula elit, gravida ac pretium nec, eleifend ultrices purus. Duis cursus orci et urna accumsan tempor. Nunc mattis tincidunt nulla, id porta velit sollicitudin blandit.</p>
<p>Duis vel augue quis elit ultrices fermentum ut eu risus. Mauris dictum nisl eget lorem pulvinar sit amet bibendum nunc scelerisque. Suspendisse ac libero magna, at imperdiet leo. Pellentesque vulputate venenatis vestibulum. Aenean varius turpis quis sem adipiscing volutpat. Fusce scelerisque iaculis augue, eget fringilla velit mattis nec. Maecenas sagittis dolor eget felis cursus imperdiet. Morbi ut dui libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet mi ac diam semper hendrerit a id tellus. Morbi accumsan magna sit amet velit ultricies ut dapibus justo rutrum. Ut et ante dui, vel pellentesque velit.</p>
</section>
<section id="news" data-anchor="news">
<h4>NEWS</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat eleifend orci, eget aliquam dolor elementum vel. Aliquam eu nulla eros, et tincidunt felis. Pellentesque congue sodales eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla suscipit nulla vel nisi fermentum ultricies. Integer ligula elit, gravida ac pretium nec, eleifend ultrices purus. Duis cursus orci et urna accumsan tempor. Nunc mattis tincidunt nulla, id porta velit sollicitudin blandit.</p>
<p>Duis vel augue quis elit ultrices fermentum ut eu risus. Mauris dictum nisl eget lorem pulvinar sit amet bibendum nunc scelerisque. Suspendisse ac libero magna, at imperdiet leo. Pellentesque vulputate venenatis vestibulum. Aenean varius turpis quis sem adipiscing volutpat. Fusce scelerisque iaculis augue, eget fringilla velit mattis nec. Maecenas sagittis dolor eget felis cursus imperdiet. Morbi ut dui libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet mi ac diam semper hendrerit a id tellus. Morbi accumsan magna sit amet velit ultricies ut dapibus justo rutrum. Ut et ante dui, vel pellentesque velit.</p>
</section>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$('nav a').on('click', function() {
var scrollAnchor = $(this).attr('data-scroll'),
scrollPoint = $('section[data-anchor="' + scrollAnchor + '"]').offset().top - 28;
$('body,html').animate({
scrollTop: scrollPoint
}, 500);
return false;
})
$(window).scroll(function() {
var windscroll = $(window).scrollTop();
if (windscroll >= 100) {
$('nav').addClass('fixed');
} else {
$('nav').removeClass('fixed');
$('nav a.active').removeClass('active');
$('nav a:first').addClass('active');
}
}).scroll();
</script>
</body>
</html>
Setelah sudah kalian simpan dan lihat hasilnya. Jika berhasil maka akan seperti ini.
saat belum scroll kebawah, menu masih diposisi awal.
saat sudah discroll menu berubah menjadi tetap diatas.
mudah bukan ?
Sekian pembahasan mengenai membuat menu fixed saat scroll dengan Jquery. Semoga bermanfaat.