需要更改基於網站部分的CSS div定位部分

如果這已在其他地方得到解答，我很抱歉，但我很難找到任何相關的東西。需要更改基於網站部分的CSS div定位部分

網站：http://www.jamesaslett.club/

我試圖找到一種方法，使菜單（.lava-NAV）的下一行始終遵循積極部分（以同樣的方式，該部分文本變爲黑色）。我已經在懸停工作，但我無法找出最佳的解決方案，讓它爲當前活動部分工作。

以下是我使用添加和刪除類將字體文本更改爲黑色的代碼;我應該在這裏做類似的事嗎？

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

非常感謝

來源

2017-03-03 sad muso

嗨，你所需要的是在這裏工作示例： 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") 
})

在這裏，鼠標懸停事件加載數據 - 屬性，並相應地移動滑塊。（所以我刪除了完全這樣做的CSS）。然後在mouseleave事件上也會加載基於activenav類的滑塊位置（從data-attr開始）。爲了使滑塊「粘」到活動位置。

CSS同我剛剛刪除了這些：#topnav li:nth-child(1):hover ~ .lava-nav

來源

2017-03-05 10:34:45 xszaboj

神奇的解決方案@xszaboj，太感謝你了！ –

這個效果非常好！還有一件事，是否有一種方法可以使用鼠標滾輪按照黑色文本移動部分時改變屬性？ –

fullPage具有afterLoad回調功能，因此只需將點擊回調提取到常用功能並在其中調用該功能。 – xszaboj

需要更改基於網站部分的CSS div定位部分

回答

相關問題