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事件

回答

相关问题