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;
}

avatar YohanaIntan24
@YohanaIntan24

4 Kontribusi 0 Poin

Diperbarui 7 tahun yang lalu

4 Jawaban:

Gausah ribet" gan.. make

 position : fixed
avatar reihanagamsk
@reihanagamsk

125 Kontribusi 41 Poin

Dipost 7 tahun yang lalu

Jawaban Terpilih

ini kodenya gan

.header_nav{
  position : fixed;
}
avatar Chata
@Chata

118 Kontribusi 19 Poin

Dipost 7 tahun yang lalu

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});
      }
    });

avatar arepsv
@arepsv

100 Kontribusi 64 Poin

Dipost 7 tahun yang lalu

@chata : iya..

avatar reihanagamsk
@reihanagamsk

125 Kontribusi 41 Poin

Dipost 7 tahun yang lalu

Login untuk ikut Jawaban