Javascript：如何添加和删除标记onscroll事件的类

Question

我是javascript的新手，我已经学到了一些基础知识，但还没有完全掌握它。 我试图通过添加一个活动类来改变我右侧导航的颜色，具体取决于我所处的部分。 我不太明白如何在传递特定div时将类附加到我的导航项中。 任何帮助将不胜感激。 我只是在下面放了一些随机代码，所以我可以链接codepen。 这比我在这里发布我的整个html / css代码要容易得多。

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/

滚动时右侧的导航线会改变颜色。 我想达到这个效果，但颜色会根据我达到的部分而改变。

Answer 1

首先，我得到导航中项目的滚动位置。 然后根据当前滚动位置添加/删除类。 看一下这个：

您修改过的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以像素为单位返回我们当前页面的下降距离。

Answer 2

要在scroll上更改元素的类--jquery：

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

Answer 3

您可以使用不同的选项：使用库或自己编写代码。 如果选择后者，可以尝试以下方法。

1）比较偏移量

window.scrollY给出了页面的滚动量。 element.offsetTop为您提供页面上元素的（固定）偏移量。 您可以比较这些值以确定当前在哪个元素中。

2）获取屏幕坐标

element.getBoundingClientRect()为您提供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>