サイトセクションに基づいてCSS divの位置を変更する必要があります

Question

これは既に別の場所で回答されている場合は申し訳ありませんが、関連するものを見つけるのは非常に困難です。

サイト：http://www.jamesaslett.club/

私は、メニュー（.lava-NAV）の下の行は、常に（セクションテキストが黒に変わるのと同じように）アクティブなセクションを追従させるための方法を見つけようとしています。私はすでにホバーで作業しているが、私はそれが現在のアクティブなセクションで動作するようにするための最良の解決策を理解できない。

以下は、フォントのテキストを黒に変更するクラスを追加して削除するコードです。私はここで似たようなことをしていますか？

function afterLoadCallback(anchorLink) { 
    $("a", "#topnav").removeClass("activenav"); 
    $("a[href=#"+anchorLink+"]", "#topnav").addClass("activenav"); 
}; 

感謝

Answer 1

こここんにちは、あなたが必要なものの一例を働いている： http://codepen.io/xszaboj/pen/gmMjGg?editors=0010

HTML：ここ

<header> 
    <nav class="main-nav nav" id="header"> 
     <ul class="topnav" id="topnav"> 
      <li><a href="#music" data-left="11.4%" data-width="50px" class="btn">MUSIC</a></li> 
      <li><a href="#gallery" data-left="20.7%" data-width="74px" class="btn">GALLERY</a></li> 
      <li><a href="#video" data-left="32.5%" data-width="50px" class="btn">VIDEO</a></li> 
      <li><a href="#home" class="btn btn-hide activenav" data-left="42.2%" data-width="125px">MASK OF JUDAS</a></li> 
      <li><a href="#gigs" data-left="60.7%" data-width="41px" class="btn">GIGS</a></li> 
      <li><a href="#merch" data-left="67.5%" data-width="59px" class="btn">MERCH</a></li> 
      <li><a href="#contact" data-left="77.5%" data-width="71px" class="btn">CONTACT</a></li> 
      <div class="lava-nav"</div> 
     </ul> 
     <div><a href="index.html#home" class="nav-text">MASK OF JUDAS</a></div> 
     <div class="burger"> 
      <button class="hamburger hamburger--3dx" type="button"> 
       <a href="javascript:void(0);" onclick="myFunction()"> 
        <span class="hamburger-box"> 
         <span class="hamburger-inner"></span> 
        </span> 
       </a> 
      </button> 
     </div> 
    </nav> 
</header> 

あなたは、私がデータ - 属性を追加したことがわかりますJavaScriptコードで使用されます。

Javascriptを：ここで

function setSlider(element){ 
    var data = { 
    left: element.attr("data-left"), 
    width: element.attr("data-width") 
    }; 
    $(".lava-nav").css("left", data.left).css("width", data.width); 
} 

$("#topnav").on("mouseover","li", function(){ 
    var dataElement = $(this).find("a"); 
    setSlider(dataElement); 
}) 

$("#topnav").on("mouseleave", function(){ 
    console.log("leave") 
    var active = $(".activenav").first(); 
    setSlider(active); 
}) 

$("#topnav").on("click", "a", function(){ 
    $(".activenav").first().removeClass("activenav"); 
    $(this).addClass("activenav") 
}) 

、mouseoverイベントにDATA-属性をロードし、それに応じて、スライダーを移動します。 （私はこれを完全に行う前にCSSを削除しました）。また、activenavクラスに基づいてスライダ位置（data-attrから）をロードするmouseleaveイベントがあります。スライダをアクティブな位置に「スティック」させるため。私はこれらを削除した同じ

CSS：#topnav li:nth-child(1):hover ~ .lava-nav