0
我正在製作一個網頁,它有一個鏈接到網頁上不同div的頂部的錨點按鈕,我想在滾動時改變按鈕的背景顏色在該div並保持該顏色,直到它到達後續部分。如何在此使用toggleClass?當使用jquery滾動在一個div上時,改變一個錨點的類
我正在製作一個網頁,它有一個鏈接到網頁上不同div的頂部的錨點按鈕,我想在滾動時改變按鈕的背景顏色在該div並保持該顏色,直到它到達後續部分。如何在此使用toggleClass?當使用jquery滾動在一個div上時,改變一個錨點的類
試試這個。活動鏈接具有綠色背景。
$(window).scroll(function(){
var oneH = $('#one').offset().top;
var twoH = $('#two').offset().top;
if ($(window).scrollTop() >= oneH){
$("header a").removeClass("active");
$("header a#aone").addClass("active");
}
if ($(window).scrollTop() >= twoH){
$("header a").removeClass("active");
$("header a#atwo").addClass("active");
}
});
.sect{
width:100%;
height:600px;
background-color:yellow;
}
#two{
background-color:blue;
}
header{
position:fixed;
top:0;
}
header a{
display:inline-block;
width:50px;
border:1px solid black;
text-align:center;
background-color:red;
}
header a.active{
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<a id="aone" class="active">div1</a>
<a id="atwo">div2</a>
</header>
<div class="sect" id="one"></div>
<div class="sect" id="two"></div>
使用scrollspy。 – ab29007
@kittyCat它要求位置是相對的 – kartikeykant18