javascript - div フォーカスのリンクの背景を変更する

Question

幅 100% に設定された大きな画像がたくさんあるページがあります。ナビゲーションは、個々の画像に移動します。スクロールされたか、リンクがクリックされたために、フォーカスされている div に関連付けられているリンクの背景の色を変更したい。

html:

<!------ Start Header Wrapper ------>
<div class="HeadWrapper">
    <!------ Start Head ------>
    <div class="Head">
        <!------ Logo Box ------>
        <div class="Logo">
            <a href="#LBHome"><img src="_images/nav/PrimalLogo.jpg" /></a>
        </div>

        <!------ Navigation links when in mobile all links except shop will go under a menu icon. ------>
        <div class="NavSpan">
            <a href="#LBHelix">Helix</a>
            <a href="#LBOriginals">Originals</a>
            <a href="#LBBlackLabel">Black Label</a>
            <a href="#LBMilitary">Military</a>
            <a href="#LBBandR">Beer & Rock</a>
            <a href="#LBCustom">Custom</a>
            <a href="#LBCommunity">Community</a>
        </div>


        <div class="clear"></div>
    </div>
    <!------ End Head ------>

    <!------ Transparent BG ------>
    <div class="HeaderBG"></div>

</div> 
<!------ End Header Wrapper ------>   


<!------ Start Images ------>
<div id="LBHome">
    <img src="_images/bodyImages/01_LB_MtEvansRDSky.jpg" />
</div>
<div id="LBMHelix">
    <img src="_images/bodyImages/02_Lookbook.jpg" />
</div>
<div id="LBWHelix" class="theme-default">
    <div id="slider" class="nivoSlide">
        <img src="_images/bodyImages/01_LB_MtEvansRDSky.jpg" />
        <img src="_images/bodyImages/02_Lookbook.jpg" />
        <img src="_images/bodyImages/03_Helix_V2.jpg" />
    </div>
</div>
<div id="LBMOriginals">
    <img src="_images/bodyImages/03_Helix_V2.jpg" />
</div>
<div id="LBWOriginals">
    <img src="_images/bodyImages/04_LB_Helix.jpg" />
</div>
<div id="LBBlackLabel">
    <img src="_images/bodyImages/05_LB_Helix.jpg" />
</div>
<div id="LBMilitary">
    <img src="_images/bodyImages/06_WMS-Helix.jpg" />
</div>
<div id="LBBandR">
    <img src="_images/bodyImages/01_LB_MtEvansRDSky.jpg" />
</div>
<div id="LBCustom">
    <img src="_images/bodyImages/01_LB_MtEvansRDSky.jpg" />
</div>
<div id="LBCommunity">
    <img src="_images/bodyImages/01_LB_MtEvansRDSky.jpg" />
</div>

CSS:

body {
    line-height: 1;
    background:#1e1e1e;
}
* {
    margin:0 auto!important;
    padding:0 auto!important;
}
img {
    width:100%;
    border: none;
}
a {
    font-family:Helvetica, Arial, sans-serif !important;
    font-size:13px;
    line-height:18px;
    color:#B70809;
}
a:link, a:visited {
    color:#b70809;
    text-decoration:none;
    outline:none;
    outline-width:0;
    border-width:0;
}
a:hover, a:active {
    color:#7c7c7c;
}
/*------------------------------------*\
Header
\*------------------------------------*/
.HeadWrapper {
    width:100%;
    height:80px;
    z-index:100;
    clear:both;
    position:fixed;
    border-bottom:1px #1e1e1e solid;
    top:0;
    left:0;
}
.HeaderBG {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:80px;
    background-color:#1e1e1e;
    z-index:101;
    /* These three lines are for transparency in all browsers. */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    opacity:.7;
}
.Head {
    position:relative;
    width:1000px;
    height:80px;
    z-index:105;
    display:block;
}
.Logo {
    width:86px;
    float:left;
}
/*------------------------------------*\
NAV 
\*------------------------------------*/
.NavSpan {
    float:left;
}
.NavSpan a {
    font-family:Helvetica, Arial, sans-serif !important;
    font-size:14px;
    line-height:18px;
    color:#FFFFFF;
    text-transform:uppercase;
    line-height:80px;
    margin-left:40px !important;
    letter-spacing:1px;
}
.NavSpan a:focus {
    background:#b70809;
}
.NavSpan a:active {
    background:#b70809;
}

:focusor:activeタグでやってみました。JavaScript でできることがたくさんあることはわかっていますが、可能であれば JavaScript を除外しようとしていました。ユーザーがページを下にスクロールすると、ナビゲーション項目の下にある赤いボックスがセクションに合わせて移動することを望みます。視差スクローラーを使用するか、ウィンドウの位置を取得して特定の位置でアクションが発生するように設定することで、それを実行できることを知っていますこれを行う簡単な方法があったかどうかはわかりません。