Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Bagaimana caranya menu navigasi ketika di scroll ke bawah menunya bergerak naik dan sebaliknya ?
<html>
<head>
<meta charset = "utf-8">
<title>Tagihan</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name = "description" content = "">
<meta name = "keywords" content = "">
</head>
<body>
<div class = "header_nav">
<div class = "nav-wrapper">
<nav class = "navmenu">
<ul id = "navmenu">
<li>Premium Account</li>
<li>Komunitas</li>
<li>Blog</li>
<li>Buka Bantuan</li>
<li>Status Transaksi</li>
</ul>
</nav>
</div>
</div>
<div class="wrapper">
<div class="header">
<div class="title-header">Tagihan #BL1611</div>
</div>
<ul>
<br style = "margin-top : -10px">Waktu Transaksi</br>
<p style = "text-align : right; margin-top : -20px">12 Desember 2016 21.25 WIB</p>
<hr style = "margin-top : 20px"></hr>
<br>Pembelian</br>
<hr style = "margin-top : 20px"></hr>
<br>Metode Pembayaran</br>
<p style = "text-align : right; margin-top : -20px">BCA KlikPay (KlikBCA Individu)</p>
</ul>
<div class="menu"></div>
<div class="content">
<table border ="1">
<p style = "margin-top : 8px; background-color : #D3D3D3; margin-top : 2px"><B><span style = "font-size : 25px; font-family : Arial">Pembelian dari Lapak</B></span></p>
<p style = "margin-left : 530px ; margin-top : -30px"><B><span style = "font-size : 25px; font-family : Arial">Total Belanja</span></B></p>
<hr style = "margin-top : 3px"></hr>
<p style = "margin-top : 8px">fungame</p>
<p style = "margin-top : 15px">160336</p>
<p style = "margin-left : 500px; margin-top : -27px; margin-bottom : 10px">Rp</br>
<hr style = "margin-top : 7px"></hr>
<br style = "margin-top : -7px">Harga Total Belanja</br>
<p style = "margin-left : 500px; margin-top : -25px">Rp</p>
<hr style = "margin-top : 15px"></hr>
<p style = "margin-top : 20px">Biaya Pelayanan <span style = "font-size : 12px">(Hanya dibebankan kepada pembeli)</span></br>
<p style = "margin-left : 500px; margin-top : -27px">Rp</p>
<hr style = "margin-top : 15px"></hr>
<br><B>TOTAL PEMBAYARAN</B></br>
<p style ="text-align:center; margin-left : 500px; color : white; height : 35px; width : 200px; margin-bottom : -20px;background-color : green; line-height : 20px; padding-top : 10px; margin-top : -20px">Rp</p>
<tr>
<p style = "margin-top : 50px">Alamat tujuan pengiriman</p>
<br></br>
</tr>
<tr>
<p style ="text-align:center; margin-left : 260px; color : white; height : 35px; width : 200px; margin-bottom : -50px;background-color : #C71585; line-height : 40px; padding-bottom : 10px">Detail Tagihan</p>
<br></br>
</tr>
</table>
</div>
<div class="footer">© 2016</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
// Menentukan elemen yang dijadikan sticky yaitu .nav
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
// Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya
if (scrollTop > stickyNavTop) {
$('.nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
} else {
$('.nav').css({ 'position': 'relative' });
}
};
// Jalankan fungsi
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>
</body>
</html>
*{margin : 0px; padding : 0px}
.wrapper {
width : 55%;
height : auto;
border : 1px solid;
margin : 0px auto;
padding: 10px;
}
.header {
width : 100%;
height : 60px;
border : 1px solid;
margin-bottom : 5px;
background-color :maroon;
}
.title-header {
width : 350px;
height : 60px;
margin-left :250px;
font-size : 30px;
color : white;
line-height : 50px;
background-color : maroon;
position : fixed;
}
.navmenu {
width :100%;
background : #C71585;
float : left;
}
.scroll {
position : 0px;
}
.navmenu ul {
margin : 0;
padding : 0;
list-style : none;
margin-left : 430px;
}
.navmenu li{
float : left;
color : white;
letter-spacing : 0px;
margin-right: 25px;
}
.navmenu li a : link, .navmenu li a : menu, .navmenu li a : visited {
text-decoration : none;
color : white;
padding : 10px 10px;
}
.ul li {
list-style : none;
width : 70px;
height : 50px;
border : 1px solid;
float : left;
text-align : center;
line-height : 30px;
background-color : #eee;
}
.menu {
width : 100%;
height : 10px;
border : 1px solid;
margin-top : 15px;
background-color : maroon;
}
.content {
width : 100%;
height : 400px;
margin-bottom : 10px;
background-color : white;
}
.content table tr br {
text-align : center;
}
.footer {
width : 100%;
height : 50px;
border :1px solid;
text-align : center;
line-height : 50px;
background-color : maroon;
color : white;
margin-top : 50px;
}
0
4 Jawaban:
Gausah ribet" gan.. make
position : fixed
0
Jawaban Terpilih
ini kodenya gan
.header_nav{
position : fixed;
}
1
coba pake jqueri gan :D
$(document).ready(function(){
//scroll navbar
$(window).scroll(function(){
if($(this).scrollTop() > 200){ $('.header_nav').css({'position':'fixed','top':0,'left':0,'width':"100%"});
}else{
$('.header_nav').css({'position':'relative','top':0,'left':0});
}
});
1
