0

I'm trying to make a 'Scroll Spy' feature in Vanilla JavaScript ES5.

Get the depth scrolled. Get each section depth with offsetTop.

If the scrolled <= THE section give me the section

So if section 1 give me section 1

If it's past the section 2 offset, give me section 2

I'm trying to console log the scrolled item.

So I have 4 sections.

I can check how deep the user has scrolled.

I get each section offsetTop and I want to compare that so it knows what section it is.

But I need to get only one section and then console log it

Here's the CodePen: https://codepen.io/Aurelian/pen/jZbLWQ?editors=0010

The JS code:

var nav = document.querySelector('.nav'),
    list = document.querySelector('.list'),
    listItems = document.querySelectorAll('.list-item'),
    listItemsAnchors = document.querySelectorAll('.list-item a'),
    sections = document.querySelectorAll('.sections'),
    body = document.querySelector('body'),
    windowTop = window.scrollTop;

    // Get the top ot the window
    // Get the top of the sectoin
    // If the top of window == top of section
    // On touch top, display the section(or the id) that touched it;
    // How deeply did someone scroll?

  function changeActive() {
    // get the href and remove the #
    // match the href with the ID
    // if same, add class active
  }

  function scrollSpy(e) {
    for (var i = 0; i < sections.length;) {
        var section = sections[i++];
        var sectionTop = section.offsetTop;
        var scrolledDeeply = window.pageYOffset;

        var sectionId = section.getAttribute('id');
        var hrefId = listItemsAnchors.href;
        var hashId = listItemsAnchors.hash;
        console.log(hrefId);
        //console.log(sectionId);
        if (scrolledDeeply <= sectionTop) {
          console.log(section)
        }
       //var id = path[1].hash.replace('#', '');

    }


  }

  window.addEventListener('scroll', scrollSpy);

The HTML:

<header class="header">
<nav class="nav">
<ul class="list">
  <li class="list-item active"><a href="#section-1">Section 1</a></li>
  <li class="list-item"><a href="#section-2">Section 2</a></li>
  <li class="list-item"><a href="#section-3">Section 3</a></li>
  <li class="list-item"><a href="#section-4">Section 4</a></li>
</ul>
</nav>
</header>

<main>
  <section class="sections" id="section-1">
    <h1>Section 1</h1>
  </section>

  <section class="sections" id="section-2">
    <h1>Section 2</h1>
  </section>

  <section class="sections" id="section-3">
    <h1>Section 3</h1>
  </section>

  <section class="sections" id="section-4">
    <h1>Section 4</h1>
  </section>

</main>
Aurelian Spodarec
  • 155
  • 4
  • 17
  • 1
    what is your question? – Ivan Sanz Carasa Feb 02 '18 at 00:35
  • I updated the question with more details. – Aurelian Spodarec Feb 02 '18 at 00:49
  • What's the problem?? – S. Walker Feb 02 '18 at 00:54
  • Look in the console. I need to get one element. The element that passed the deepth scroll – Aurelian Spodarec Feb 02 '18 at 00:55
  • So far it get's all 4 elements. If user scroll passed Section 1, how the scetion 1. If user scrolled pass section 2, show section 2. Not all 4, just the one. – Aurelian Spodarec Feb 02 '18 at 00:56
  • Your code is always logging the next section, in addition to all other sections below it. If you only want the next section, you need to exit the for loop. Use a `break;` statement to exit the loop. https://stackoverflow.com/questions/9830650/how-to-stop-a-javascript-for-loop – S. Walker Feb 02 '18 at 00:57
  • 1
    You could also wrap the for loop in a function and use a `return` statement to return the element. `return` would automatically exit the function, therefore exiting the loop. – S. Walker Feb 02 '18 at 01:00
  • I'm not sure what you mean. I tried that too. It logs all 4. It logs the current one with all the other ones. How can I just make it so it shows just the current one? The break, breaks it. – Aurelian Spodarec Feb 02 '18 at 01:01
  • Is this what you are looking for: https://codepen.io/anon/pen/KQdEoQ?editors=0010 – S. Walker Feb 02 '18 at 02:00
  • Yeah, but uh, I'm confused now :D Did you change any of my code? Or did you just add the break right there? Was my logic correct? – Aurelian Spodarec Feb 02 '18 at 02:14
  • Hmmmm. From what I understood, does break work like this? You know the i++ ? It loops one item at a time. So If we put [i++], and set 'if' condition, but we loop the full [i] we are basically saying to break it the first time on the condition? so 4sections will get tested b y [0]. [1]. [2]. [3] right? sections.length is a number, so it will break it number by number? Something like that? – Aurelian Spodarec Feb 02 '18 at 04:07

0 Answers0