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

Send two arguments to a personalized validation function using express-validation

Issue: Attempting to render objects as React children is invalid. Consider using an array if you want to render a collection of children. This problem often occurs when fetching data from a JSON

Unable to implement a design on a button during its click event

Working with AngularJS: Implementing a Service in a Controller

Ways to ensure certain code is executed every time a promise is resolved in Angular.js

AngularJS directive that performs asynchronous validation upon blur

multiple elements sharing identical CSS styling

Having trouble getting a local npm installation to work from a specific file path?

React Table in Modal Using Custom Hook State

Sharing data between two Angular 2 component TypeScript files

Dealing with Memory Leaks in AngularJS and Jquery

Utilize jQuery to export HTML or JSON data to an Excel spreadsheet

Having trouble with React's conditional rendering not working as expected?

Sending a series of filtered GET requests to my Express backend in a MERN (MongoDB, Express, React,

Decreased Performance in Vue Threejs with Larger JSON Data Sets

Navigating the world of gtag and google_tag_manager: untangling

Having trouble verifying the selection option in Angular 6

How can I show the text name as a selection in the React Material UI Autocomplete component while sending the ID as the value?

How to retrieve TypeScript object within a Bootstrap modal in Angular

A method to find the sum of the final n elements in an array by employing Arr.reduceRight