 |
| Sticky Widget Membuat Sidebar Menjadi Fixed |
Untuk membuat sidebar tidak bergerak saat di scrool kebawah dan keatas serta berhenti ketika bertemu dengan footer. Seperti gambar dibawah ini, kita akan membuat bagian side menjadi fixed atau tidak bergerak dan akan berhenti ketika bertemu dengan footer. Side akan mengikuti footer ketika di sroll terus kebawah dan akan meninggalkan footer ketika di scroll ketas dan kembali keposisi semula.
Bagi yang ingin mencoba berikut koding untuk membuat STICKY WIDGET seperti yang diatas :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>tugasweb.com</title>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(function() {
if ($('.side').length) { // Ganti "#sticky-sidebar" dengan ID tertentu
var el = $('.side');
var stickyTop = $('.side').offset().top + 5;
var stickyHeight = $('.side').height();
$(window).scroll(function() {
var limit = $('.foot').offset().top - stickyHeight - 1; // Jarak berhenti di "#footer-wrapper"
var windowTop = $(window).scrollTop();
if (stickyTop < windowTop) {
el.css({
position: 'fixed',
width: '39.4%',
top: 1 // Jarak atau margin sticky dari atas
});
} else {
el.css({top: 110},'position', 'absolute');
}
if (limit < windowTop) {
var diff = limit - windowTop;
el.css({
top: diff
});
}
});
}
});
//]]>
</script>
</head>
<body>
<div class="top"><center><h1>TOP</h1></center></div>
<div class="wrap">
<div class="page"><center><h1>PAGE</h1></center></div>
<div class="side"><center><h1>SIDE</h1></center></div>
</div>
<div class="foot"><center><h1>FOOT</h1></center></div>
</body>
</html>
Untuk koding CSS nya silahkan gunakan koding berikut ini :
.wrap{
height: 2500px;
max-height: 100%;
width: 100%;
border: 1px solid black;
background-color: red;
}
.page{
width: 60%;
height: 2500px;
background-color: yellow;
border: 1px solid black;
float: left;
position: static;
}
.side{
width: 39.4%;
height: 300px;
background-color: blue;
right: 0;
margin-right: 6px;
border: 1px solid black;
position: absolute;
}
.top{
height: 100px;
width: 100%;
border: 1px solid black;
background-color: cyan;
}
.foot{
height: 500px;
width: 100%;
border: 1px solid black;
background-color: cyan;
}
Semoga bermanfaat tutorial membuat sticky widget untuk website anda. sticky widget biasanya digunakan untuk menu share social media agar selalu tampil dilayar dan mempermudah pengunjung untuk melakukan share artikel anda. Bagi yang masih penasaran dengan sticky widget silahkan mencoba demo dibawah dan download file nya ...
Belum ada tanggapan untuk "Sticky Widget Membuat Sidebar Menjadi Fixed"
Post a Comment