Update the scrollspy navigation in a div with overflow by toggling the active class

Question

Update the scrollspy navigation in a div with overflow by toggling the active class

Struggling to implement a navigation menu within a self-scrolling div using html/css/jquery. Looking for the menu items to toggle the active class when in view or at the top of the scrolling div.

I'm essentially trying to achieve something like this example: https://codepen.io/vlrprbttst/pen/LkjZbE?editors=1010, but contained within a self-scrolling div.

I've made progress with this code pen: https://codepen.io/frontend2020/pen/ExWaXVE, however, the active class triggers prematurely and I can't seem to pinpoint why.

I suspect there may be an issue in the following section of code:

if (
      refElement.position().top <= scrollPos &&
      refElement.position().top + refElement.height() > scrollPos
    )

I've checked the scroll position and element positions, everything seems aligned, yet I feel I might be overlooking something crucial.

Any guidance or solution would be greatly appreciated. Thank you!

javascript html jquery css

Answer 1

Answer №1

If you're searching for a way to implement a scrollspy, you've come to the right place.

To achieve this, you will need to attach an event listener to the document. As the user scrolls, iterate through each section to determine if it is currently visible on the screen. If it is, apply a specific class to the corresponding navigation element. If not, remove the class.

This concept can be illustrated as follows:

$(document).ready(function() {
  function isInViewport(elem) {
    if (typeof jQuery === "function" && elem instanceof jQuery) {
      elem = elem[0];
    }
    var bounds = elem.getBoundingClientRect();
    return (
      bounds.top >= 0 &&
      bounds.left >= 0 &&
      bounds.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      bounds.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }
  var sections = $('.section');
  $(document).scroll(function() {
    for (let i = 0; i < sections.length; i++) {
      let currentSection = sections[i];
      let relatedNav = $('li[data-id="' + $(currentSection).data('for') + '"');
      if (isInViewport(currentSection)) {
        relatedNav.addClass('active');
      } else {
        relatedNav.removeClass('active');
      }
    }
  })
})

.section.first {
  margin-top: 100px;
}

.section {
  height: 500px;
  border: 1px solid;
}

.nav {
  position: fixed;
  top: 0;
}

.nav .active {
  background-color: #ff4a4a;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
  <ul>
    <li data-id="1">Section 1</li>
    <li data-id="2">Section 2</li>
    <li data-id="3">Section 3</li>
  </ul>
</div>
<div class="section first scrollspy-target" data-for="1">
  Section 1
</div>
<div class="section scrollspy-target" data-for="2">
  Section 2
</div>
<div class="section scrollspy-target" data-for="3">
  Section 3
</div>

Note: I suggest trying out the live demo here.

Answer 2

If you're searching for a way to implement a scrollspy, you've come to the right place.

To achieve this, you will need to attach an event listener to the document. As the user scrolls, iterate through each section to determine if it is currently visible on the screen. If it is, apply a specific class to the corresponding navigation element. If not, remove the class.

This concept can be illustrated as follows:

$(document).ready(function() {
  function isInViewport(elem) {
    if (typeof jQuery === "function" && elem instanceof jQuery) {
      elem = elem[0];
    }
    var bounds = elem.getBoundingClientRect();
    return (
      bounds.top >= 0 &&
      bounds.left >= 0 &&
      bounds.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      bounds.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }
  var sections = $('.section');
  $(document).scroll(function() {
    for (let i = 0; i < sections.length; i++) {
      let currentSection = sections[i];
      let relatedNav = $('li[data-id="' + $(currentSection).data('for') + '"');
      if (isInViewport(currentSection)) {
        relatedNav.addClass('active');
      } else {
        relatedNav.removeClass('active');
      }
    }
  })
})

.section.first {
  margin-top: 100px;
}

.section {
  height: 500px;
  border: 1px solid;
}

.nav {
  position: fixed;
  top: 0;
}

.nav .active {
  background-color: #ff4a4a;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
  <ul>
    <li data-id="1">Section 1</li>
    <li data-id="2">Section 2</li>
    <li data-id="3">Section 3</li>
  </ul>
</div>
<div class="section first scrollspy-target" data-for="1">
  Section 1
</div>
<div class="section scrollspy-target" data-for="2">
  Section 2
</div>
<div class="section scrollspy-target" data-for="3">
  Section 3
</div>

Note: I suggest trying out the live demo here.

Update the scrollspy navigation in a div with overflow by toggling the active class

Answer №1

Similar questions

The compilation process encountered an error: TypeError - Unable to access property 'exclude' as it is undefined (awesome-typescript-loader)

A problem arises when trying to showcase the content in a responsive manner on the hamburger menu, particularly when viewing on mobile

Issue encountered when utilizing ngResource in factory: unable to choose JSON index

Ensure that the anchor element's height fills the entire div when using the display:block property

An array of dictionaries that are the same except for one dictionary containing an unspecified key

Searching for and removing array elements in Angular 2 using the IndexOf method

Discovering the server endpoint for the Star Wars SWAPI API: a step-by-step guide

Utilizing ES6 promises in node.js to send a null response

Automatically fill in a text box with previously saved information

The Firebase 'not-in' operator is malfunctioning

Issue with Flex display not being applied within Material UI Grid Item

Issues arising from jQuery dialog functionality when trying to link specific IDs

The try and catch block in JavaScript is failing to correctly capture the HTTP status

Designing a visual showcase with interactive tab links for image selection

Could you share the most effective method for implementing a live search feature using javascript or jquery?

Numerous input fields available for AJAX auto-complete functionality and name verification

Having trouble getting a DIV to appear on top of another DIV containing an image

Update the image links to automatically refresh every half a second based on the values inputted in the text bars

How to target and append individual table cells to a particular table row using JQuery

How can a React app be developed offline?