Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
Bagaimana supaya navbar bisa ikut berubah warna active ketika di scroll?
bagaimana cara supaya navbar yang active bisa berubah saat di scroll?
<!DOCTYPE html>
<html>
<head>
<title>noname</title>
<style>
* {
margin: auto;
}
.satu {
width: 100%;
height: 100vh;
background: grey;
}
.dua {
width: 100%;
height: 100vh;
background: green;
}
.tiga {
width: 100%;
height: 100vh;
background: salmon;
}
nav {
width: 100%;
height: 50px;
background: black;
position: fixed;
}
nav a {
color: white;
font-size: 20px;
padding: 10px;
}
.active {
background: salmon;
}
</style>
</head>
<body>
<nav>
<a href="#satu" class="page active">SATU</a>
<a href="#dua" class="page">DUA</a>
<a href="#tiga" class="page">TIGA</a>
</nav>
<div class="satu" id="satu"></div>
<div class="dua" id="dua"></div>
<div class="tiga" id="tiga"></div>
<script src="js/jquery.js"></script>
<script src="js/jquery.easing.js"></script>
<script>
$(".page").click(function(){
var target = $(this).attr("href");
var eltujuan = $(target).offset().top;
$('html,body').animate({
scrollTop: eltujuan
},800,'easeInOutExpo');
switch(target){
case '#satu':
$(this).siblings().removeClass("active");
$(this).addClass("active");
break;
case '#dua':
$(this).siblings().removeClass("active");
$(this).addClass("active");
break;
case '#tiga':
$(this).siblings().removeClass("active");
$(this).addClass("active");
break;
}
event.preventDefault();
});
</script>
</body>
</html>
1
3 Jawaban:
Maaf mas, yang berubah itu backgroundnya atau teksnya atau warna teksnya?
0
pertanyaan itu sudah terjawab gan makasih :)
0