Postingan lainnya
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