jqueryを使ってdivにスクロールするときのアンカーのクラスを変更する

Question

トップにアンカーボタンがあるウェブページを作成して、ウェブページ上の異なるdivにリンクしています。スクロールするときにボタンの背景色を変更したいそのdivの色を維持し、それが後続のセクションに到達するまで続けます。これでどのようにtoggleClassを使用できますか？

Answer 1

はこれを試してみてください。アクティブなリンクは緑の背景です。

$(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>