Javascript：如何添加和刪除標記的類onscroll事件

我對JavaScript很新，我已經學習了一些基礎知識，但還沒有完全掌握它。我試圖通過添加一個活動類來改變我的導航顏色，這取決於我所在的部分。我不太明白，當它通過特定的div時，我會如何實現將類追加到我的導航項。任何幫助將不勝感激。我只是在下面放置了一些隨機代碼，以便我可以鏈接codepen。這比我在這裏發佈我的整個html/css代碼要容易得多。Javascript：如何添加和刪除標記的類onscroll事件

HTML

div class="global-container"> 

<div class="logo"> 
    <div class="layer2"> 
    </div> 
</div> 

<div class="copy"> 
    <p>&copy; text</p> 
</div> 

<div class="links"> 
    <a href="#"> 
     <img src=""> 
    </a> 
    <br> 
    <a href="#"> 
     <img src=""> 
    </a> 
</div> 

<!-- End of Logo !--> 

<ul class="sidebar"> 

    <a href="#section1"> 
     <div class="item"> 

     </div> 
    </a> 
    <a href="#section2" > 
     <div class="item"> 

     </div> 
    </a> 
    <a href="#section3"> 
     <div class="item"> 

     </div> 
    </a> 
    <a href="#section4" > 

     <div class="item" > 

     </div> 
    </a> 
    <a href="#section5" > 
     <div class="item"> 

     </div> 
    </a> 


</ul> 
<!-- Sidebar!--> 

<div class="content-container"> 
    <div id="section1"> 

     <div class="inner-container"> 

      <div class="intro-message center"> 


        <h1 class="headline-big center"> 
        section1</h1> 


        <h2> 
        text 
        </h2> 

        <p>text</p> 

        <div class="button"> 
        <a href="#">text</a> 
        <a href="#">text</a> 
        </div> 


        <h6 class="change">text</h6> 


      </div> 


     </div> 

    <div id="section2"> 



       <div class="about-message"> 

        <div class="left"> 
         <h1> 
          Section 1</h1> 


          <p> text 
          <br> 
          <br> 

          text</p> 
        </div> 


       </div> 

    </div> 







    <div id="section3"> 

     <div class="inner-container"> 

      <div class="education-message "> 


        <h1 > 
        section3</h1> 



     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 










        </div> 



      </div> 





     </div> 

    </div> 



    <div id="section4"> 

     <div class="inner-container"> 

      <div class="intro-message center"> 


        <h1 class="headline-big center"> 
        Section4</h1> 



        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 




      </div> 





     </div> 




    </div> 

    <div id="section5"> 

     <div class="inner-container"> 

      <div class="intro-message center"> 


        <h1 class="headline-big center"> 
        section 5</h1> 




        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 




      </div> 





     </div>

CSS - 我要添加到.item類

.active { 
    background-color: red; 
}

https://codepen.io/anon/pen/BZzbGz

這裏有一個例子： https://bonhomme.lol/

上的導航線滾動時右鍵改變顏色。我想達到這個效果，但是顏色會根據我所到達的div區域而改變。

來源

2017-06-13 Safder

不要只插入無意義的代碼，但最相關的部分。畢竟，這是檢查的目的。 – Christoph

格式化您的代碼，刪除空格並提供一個最簡單的示例。 –

有關滾動改變一個元素的類 - jQuery的：

<script> 
    if($(document).scrollTop>10){ 
    $("#myDiv).addClass("active"); 
} 
else{ 
    $("#myDiv").removeClass("active"); 
}

來源

2017-06-13 18:16:48

首先，我得到了導航項目的滾動位置。然後根據當前滾動位置添加/刪除類。檢查了這一點：

Your modified Codepen

$(document).ready(function() { 

    $(document).on("scroll", onScroll); 

    function onScroll(event) { 
     var scrollPos = $(document).scrollTop(); 

     $(".sidebar a").each(function() { 
      var currDiv = $(this).find("div");; 
      var currLink = $(this); 
      var refElement = $(currLink.attr("href")); 

      if(refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) 
      { 
       $(".sidebar a div").removeClass("active"); 
       currDiv.addClass("active"); 
      } else { 
       currDiv.removeClass("active"); 
      } 
      }); 
     } 
});

編輯：這是你的要求，我們正在使用的IF

refElement.position().top回報項目的解釋如何從頁面頂部的像素那個元素是。

refElement.height()返回表示元素高度的像素。

scrollPos以像素爲單位返回目前頁面上的距離。

來源

2017-06-13 18:34:02 CrazyPaste

這與我想要的完全一樣！謝謝。我想知道你是否可以解釋這個函數中的參數。 if（refElement.position（）。top <= scrollPos && refElement.position（）。top + refElement.height（）> scrollPos） – Safder

當然。查看更新後的答案。此外，如果這解決了您的問題，請將其標記爲正確答案並投票。 :) – CrazyPaste

-1

你有不同的選擇來做到這一點：使用庫或自己編寫代碼。如果您選擇後者，您可以嘗試以下方法。

1）比較偏移

window.scrollY給你的頁面的滾動量。 element.offsetTop爲您提供頁面上元素的（固定）偏移量。您可以比較這些值以確定哪些元素當前正在查看。

2）獲取屏幕座標

element.getBoundingClientRect()給你一個元素的屏幕座標。您可以使用這些來檢查它是否在頁面的頂部。

現在你只需在滾動事件中使用一個鉤子來檢查位置並知道你在哪裏。我的代碼片段只涉及向下滾動，我留下了「向上滾動」的情況，供您作爲練習來實施。

var headings = [document.querySelector("h1"),document.querySelector("h2"),document.querySelector("h3"),document.querySelector("h4")]; 
 
var nav = document.querySelector("nav span"); 
 
var currentIndex=0; 
 

 
document.addEventListener("scroll",function(){ 
 
    // get the current position of the element 
 
    let currentElPos = headings[currentIndex].getBoundingClientRect().top; 
 
    // if it's near the top border update the navigation 
 
    if (currentElPos < 100){ 
 
    // in your case, you would update the class 
 
    nav.innerHTML = headings[currentIndex].innerHTML; 
 
    if (currentIndex+1<headings.length) currentIndex++; 
 
    } 
 
    
 
});

h1,h2,h3{ 
 
    margin-bottom:20em; 
 
} 
 
h4{ 
 
    margin-bottom:30em; 
 
} 
 
nav{ 
 
    position:fixed;right:20px;top:20px; 
 
    border:2px solid red;padding:5px; 
 
}

<nav>You are viewing:<br><span>First heading!</span></nav> 
 
<h1>First heading!</h1> 
 
<h2>Second heading!</h2> 
 
<h3>Third heading!</h3> 
 
<h4>Fourth heading!</h4>

來源

2017-06-13 18:35:10 Christoph

Javascript：如何添加和刪除標記的類onscroll事件

回答

相關問題