Hi how can i active my scroll indicator to stay orange whenever i press?
Current result : When i press it still remain gray
Expected result: When i press the specify dot stay orange
I try to use ::after,::before % visited and it still not working Does anyone know how can i solve this? Expected result: Whenever i click on the dot it still active with orange color and scroll to the section
<style>
.step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}
.step:active {
background-color: #FF761F;
}
<div >
<a href="#1" ></a>
<a href="#2" ></a>
<a href="#3" ></a>
</div>
<section id="1" >
Hello
</section>
<section id="2" >
Good Morning
</section>
<section id="3" >
Good Night
</section>
`your text`
$(function(){
$(".scroll a").on('click',function(){
$("step").addClass('active');
$("html,body").animate({
scrollTop: $($.attr(this,'href')).offset().top
},300);
});
});
CodePudding user response：
that
thread is for browsing. With three javascript functions, we have made it so that when the first, second, and third buttons are clicked, they will be orange. another piece of code already deals with scrolling. below we have a comment, when we remove that comment and scroll, we will see that certain numbers appear in the console, we enter those numbers as if value.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.scroll{
position: fixed;
background-color: rgb(183, 255, 251);
}
.step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}
.active {
height: 15px;
width: 15px;
margin: 0 2px;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
background-color: #FF761F;
}
</style>
<div >
<a href="#1" onclick="fun1()" id="a1"></a>
<a href="#2" onclick="fun2()" id="a2"></a>
<a href="#3" onclick="fun3()" id="a3"></a>
</div>
<section id="1" >
<br><br>
Hello
</section>
<section id="2" >
<br><br>
Good Morning
</section>
<section id="3" >
<br><br>
Good Night
</section>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<script>
function fun1() {
document.getElementById("a1").className = "active";
document.getElementById("a2").className = "step";
document.getElementById("a3").className = "step";
}
function fun2() {
document.getElementById("a2").className = "active";
document.getElementById("a1").className = "step";
document.getElementById("a3").className = "step";
}
function fun3() {
document.getElementById("a3").className = "active";
document.getElementById("a1").className = "step";
document.getElementById("a2").className = "step";
}
window.addEventListener('scroll', () => {
const scrolled=window.scrollY;
if ( scrolled >1){
document.getElementById("a1").className="active";
document.getElementById("a2").className="step";
document.getElementById("a3").className="step";
}
if ( scrolled >45){
document.getElementById("a2").className="active";
document.getElementById("a1").className="step";
document.getElementById("a3").className="step";
}
if ( scrolled >105){
document.getElementById("a3").className="active";
document.getElementById("a1").className="step";
document.getElementById("a2").className="step";
}
//console.log(scrolled)
});
</script>
</body>
</html>
CodePudding user response：
Would this plugin do what you are trying to achieve?